/* =========================================================
   SHORT DRAMA
   Main Stylesheet
========================================================= */


/* =========================================================
   1. GLOBAL
========================================================= */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;

    background: #080808;
    color: #ffffff;

    font-family: Arial, Helvetica, sans-serif;
}

a {
    color: inherit;
}

img {
    max-width: 100%;
}


/* =========================================================
   2. NAVBAR
========================================================= */

.navbar {
    min-height: 70px;

    background: rgba(8, 8, 8, 0.96);
    border-bottom: 1px solid #202020;
}

.navbar-brand {
    color: #ffffff !important;

    font-size: 1.45rem;
    font-weight: 800;

    text-decoration: none;
}

.navbar .text-secondary {
    color: #718096 !important;
}


/* =========================================================
   3. HOME HEADER
========================================================= */

main.container {
    max-width: 1450px;
}

main h1 {
    color: #ffffff;
}


/* =========================================================
   4. PLATFORM TABS
========================================================= */

.platform-tabs {
    display: flex;
    align-items: center;

    gap: 10px;

    width: 100%;

    padding: 5px 0 14px;

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

    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.platform-tabs::-webkit-scrollbar {
    display: none;
}

.platform-tab {
    flex: 0 0 auto;

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

    gap: 8px;

    min-height: 46px;

    padding: 9px 18px;

    background: #151515;
    color: #aaaaaa;

    border: 1px solid #292929;
    border-radius: 50px;

    text-decoration: none;

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

    white-space: nowrap;

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

.platform-tab:hover {
    color: #ffffff;

    background: #202020;
    border-color: #3a3a3a;

    transform: translateY(-2px);
}

.platform-tab.active {
    color: #ffffff;

    background: #e50914;
    border-color: #e50914;
}

.platform-logo {
    width: 23px;
    height: 23px;

    flex-shrink: 0;

    object-fit: contain;

    border-radius: 5px;
}

.all-platforms {
    color: #ffffff;

    border-color: #454545;
}


/* =========================================================
   5. DISCOVER LINK
========================================================= */

.discover-link {
    display: inline-block;

    color: #ff1724;

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

    text-decoration: none;

    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
}

.discover-link:hover {
    color: #ff3440;

    transform: translateX(-3px);
}


/* =========================================================
   6. DRAMA GRID
========================================================= */

.drama-grid {
    display: grid;

    /*
       مهم:
       الكروت لن تتمدد بشكل جنوني حتى لو
       رجعت المنصة عدد قليل من المسلسلات.
    */

    grid-template-columns:
        repeat(auto-fill, minmax(180px, 230px));

    justify-content: start;

    gap: 28px 18px;

    width: 100%;
}


/* =========================================================
   7. DRAMA CARD
========================================================= */

.drama-card {
    display: block;

    width: 100%;
    min-width: 0;

    color: #ffffff;
    text-decoration: none;

    border-radius: 14px;

    transition:
        transform 0.22s ease,
        opacity 0.22s ease;
}

.drama-card:hover {
    color: #ffffff;

    transform: translateY(-6px);
}


/* =========================================================
   8. POSTER
========================================================= */

.poster {
    position: relative;

    width: 100%;

    /*
       Posters موحدة مهما كانت أبعاد
       الصورة الأصلية من المنصة
    */

    aspect-ratio: 2 / 3;

    overflow: hidden;

    background: #181818;

    border-radius: 14px;
}

.poster img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transition: transform 0.35s ease;
}

.drama-card:hover .poster img {
    transform: scale(1.035);
}


/* =========================================================
   9. POSTER OVERLAY
========================================================= */

.poster-overlay {
    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            to top,
            rgba(0, 0, 0, 0.45) 0%,
            rgba(0, 0, 0, 0.05) 40%,
            transparent 65%
        );
}


/* =========================================================
   10. STATUS BADGE
========================================================= */

.status {
    position: absolute;

    top: 10px;
    right: 10px;

    z-index: 2;

    padding: 5px 9px;

    background: rgba(0, 0, 0, 0.78);
    color: #ffffff;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 7px;

    backdrop-filter: blur(6px);

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


/* =========================================================
   11. DRAMA INFORMATION
========================================================= */

.drama-info {
    padding-top: 10px;
}

.drama-info h3 {
    margin: 0 0 5px;

    color: #ffffff;

    font-size: 15px;
    font-weight: 700;

    line-height: 1.5;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.drama-info p {
    margin: 0;

    color: #858585;

    font-size: 12px;

    line-height: 1.5;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* =========================================================
   12. EMPTY STATE
========================================================= */

.empty-content {
    width: 100%;

    padding: 80px 20px;

    text-align: center;

    color: #777777;
}

.empty-content h3 {
    margin-bottom: 10px;

    color: #ffffff;

    font-size: 22px;
}


/* =========================================================
   13. DRAMA DETAILS
========================================================= */

.drama-details {
    display: grid;

    grid-template-columns: 260px minmax(0, 1fr);

    gap: 40px;

    align-items: start;
}

.detail-poster {
    width: 100%;

    aspect-ratio: 2 / 3;

    overflow: hidden;

    background: #161616;

    border-radius: 16px;
}

.detail-poster img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

.detail-content {
    min-width: 0;

    padding-top: 20px;
}

.detail-content h1 {
    margin: 15px 0;

    color: #ffffff;

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

    line-height: 1.35;
}


/* =========================================================
   14. PLATFORM BADGE
========================================================= */

.platform-badge {
    display: inline-block;

    padding: 6px 12px;

    background: #e50914;
    color: #ffffff;

    border-radius: 20px;

    font-size: 12px;
    font-weight: 700;
}


/* =========================================================
   15. GENRES
========================================================= */

.genres {
    display: flex;
    flex-wrap: wrap;

    gap: 8px;

    margin-bottom: 20px;
}

.genres span {
    padding: 7px 12px;

    background: #1c1c1c;
    color: #cccccc;

    border: 1px solid #292929;
    border-radius: 20px;

    font-size: 13px;
}


/* =========================================================
   16. SYNOPSIS
========================================================= */

.synopsis {
    max-width: 850px;

    color: #aaaaaa;

    font-size: 15px;
    line-height: 2;
}


/* =========================================================
   17. DRAMA META
========================================================= */

.drama-meta {
    display: flex;
    flex-wrap: wrap;

    gap: 25px;

    margin-top: 25px;

    color: #888888;
}

.drama-meta strong {
    color: #ffffff;
}


/* =========================================================
   18. EPISODES
========================================================= */

.episodes-section {
    margin-top: 60px;
}

.episodes-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 20px;
}

.episodes-header h2 {
    margin: 0;

    color: #ffffff;

    font-weight: 800;
}

.episodes-header span {
    color: #777777;
}

.episodes-grid {
    display: grid;

    grid-template-columns:
        repeat(5, minmax(0, 1fr));

    gap: 10px;
}


/* =========================================================
   19. EPISODE CARD
========================================================= */

.episode-card {
    display: flex;
    align-items: center;

    gap: 12px;

    min-width: 0;

    padding: 15px;

    background: #141414;
    color: #ffffff;

    border: 1px solid #222222;
    border-radius: 10px;

    text-decoration: none;

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

.episode-card:hover {
    color: #ffffff;

    background: #202020;
    border-color: #444444;

    transform: translateY(-2px);
}

.play-icon {
    width: 34px;
    height: 34px;

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

    flex-shrink: 0;

    background: #e50914;

    border-radius: 50%;

    font-size: 12px;
}

.episode-card strong {
    display: block;

    font-size: 14px;
}

.episode-card small {
    display: block;

    margin-top: 3px;

    color: #777777;
}


/* =========================================================
   20. WATCH / PLAYER
========================================================= */

.watch-page {
    background: #050505;
}

.watch-container {
    width: 100%;
    max-width: 1200px;

    margin: 0 auto;

    padding: 35px 20px 80px;
}

.player-wrapper {
    width: 100%;

    overflow: hidden;

    background: #000000;

    border-radius: 16px;

    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.6);
}

.player-wrapper video {
    display: block;

    width: 100%;
    max-height: 75vh;

    margin: 0 auto;

    background: #000000;

    object-fit: contain;
}

.watch-info {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding: 25px 5px;
}

.watch-info h1 {
    margin: 10px 0 5px;

    color: #ffffff;

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

.watch-info p {
    margin: 0;

    color: #888888;
}

.watch-platform {
    color: #ff1724;

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

    text-transform: uppercase;
}


/* =========================================================
   21. QUALITY
========================================================= */

.quality {
    display: flex;
    flex-wrap: wrap;

    gap: 7px;
}

.quality span {
    padding: 7px 11px;

    background: #1c1c1c;
    color: #ffffff;

    border: 1px solid #333333;
    border-radius: 7px;

    font-size: 12px;
}


/* =========================================================
   22. EPISODE NAVIGATION
========================================================= */

.episode-navigation {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    padding-top: 25px;

    border-top: 1px solid #1d1d1d;
}

.episode-nav-btn {
    padding: 12px 22px;

    background: #171717;
    color: #ffffff;

    border-radius: 8px;

    text-decoration: none;

    transition: background-color 0.2s ease;
}

.episode-nav-btn:hover {
    color: #ffffff;

    background: #252525;
}

.episode-nav-btn.primary {
    background: #e50914;
}

.episode-nav-btn.primary:hover {
    background: #ff1724;
}


/* =========================================================
   23. DISCOVER PAGE
========================================================= */

.discover-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 30px;
}

.discover-heading h1 {
    margin-top: 12px;

    color: #ffffff;

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

.load-more-container {
    padding: 50px 0;

    text-align: center;
}

.load-more-btn {
    padding: 12px 35px;

    background: #e50914;
    color: #ffffff;

    border: 0;
    border-radius: 50px;

    font-weight: 700;

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        transform 0.2s ease;
}

.load-more-btn:hover {
    background: #ff1724;

    transform: translateY(-2px);
}

.load-more-btn:disabled {
    opacity: 0.55;

    cursor: not-allowed;

    transform: none;
}

.loading-text {
    color: #777777;
}


/* =========================================================
   24. ALL PLATFORMS PAGE
========================================================= */

.platforms-page-header {
    margin-bottom: 35px;
}

.platforms-eyebrow {
    color: #e50914;

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

.platforms-page-header h1 {
    margin: 7px 0 8px;

    color: #ffffff;

    font-size: 38px;
    font-weight: 900;
}

.platforms-page-header p {
    margin: 0;

    color: #777777;
}


/* =========================================================
   25. PLATFORMS GRID
========================================================= */

.platforms-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 15px;
}

.platform-card {
    display: flex;
    align-items: center;

    gap: 17px;

    min-width: 0;
    min-height: 110px;

    padding: 18px;

    background: #111111;
    color: #ffffff;

    border: 1px solid #222222;
    border-radius: 16px;

    text-decoration: none;

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

.platform-card:hover {
    color: #ffffff;

    background: #171717;
    border-color: #444444;

    transform: translateY(-4px);
}


/* =========================================================
   26. PLATFORM CARD LOGO
========================================================= */

.platform-card-logo {
    width: 65px;
    height: 65px;

    flex: 0 0 65px;

    overflow: hidden;

    background: #1c1c1c;

    border-radius: 14px;
}

.platform-card-logo img {
    display: block;

    width: 100%;
    height: 100%;

    padding: 8px;

    object-fit: contain;
}

.platform-fallback {
    width: 100%;
    height: 100%;

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

    background:
        linear-gradient(
            135deg,
            #252525,
            #111111
        );

    color: #ffffff;

    font-size: 25px;
    font-weight: 900;
}

.platform-card-info {
    min-width: 0;
}

.platform-card-info h2 {
    margin: 0 0 7px;

    color: #ffffff;

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

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.platform-card-info span {
    color: #777777;

    font-size: 12px;

    transition: color 0.2s ease;
}

.platform-card:hover .platform-card-info span {
    color: #e50914;
}


/* =========================================================
   27. RESPONSIVE - LARGE TABLET
========================================================= */

@media (max-width: 1200px) {

    .drama-grid {
        grid-template-columns:
            repeat(auto-fill, minmax(170px, 215px));
    }

    .platforms-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

    .episodes-grid {
        grid-template-columns:
            repeat(4, minmax(0, 1fr));
    }

}


/* =========================================================
   28. RESPONSIVE - TABLET
========================================================= */

@media (max-width: 992px) {

    .drama-grid {
        grid-template-columns:
            repeat(auto-fill, minmax(160px, 1fr));
    }

    .episodes-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

    .detail-content h1 {
        font-size: 30px;
    }

}


/* =========================================================
   29. RESPONSIVE - MOBILE
========================================================= */

@media (max-width: 768px) {

    main.container {
        padding-left: 14px;
        padding-right: 14px;
    }

    .navbar {
        min-height: 62px;
    }

    .navbar-brand {
        font-size: 1.2rem;
    }


    /* Platform tabs */

    .platform-tab {
        min-height: 42px;

        padding: 8px 14px;

        font-size: 13px;
    }

    .platform-logo {
        width: 20px;
        height: 20px;
    }


    /* Drama cards */

    .drama-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));

        gap: 22px 10px;
    }

    .drama-info h3 {
        font-size: 13px;
    }

    .drama-info p {
        font-size: 11px;
    }


    /* Details */

    .drama-details {
        grid-template-columns: 130px minmax(0, 1fr);

        gap: 20px;
    }

    .detail-content {
        padding-top: 0;
    }

    .detail-content h1 {
        font-size: 23px;
    }

    .synopsis {
        grid-column: 1 / -1;
    }


    /* Episodes */

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


    /* Platforms */

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

    .platform-card {
        min-height: 95px;

        padding: 14px;

        gap: 12px;
    }

    .platform-card-logo {
        width: 52px;
        height: 52px;

        flex-basis: 52px;
    }

    .platform-card-info h2 {
        font-size: 15px;
    }


    /* Watch */

    .watch-info {
        align-items: flex-start;

        flex-direction: column;
    }

}


/* =========================================================
   30. RESPONSIVE - SMALL MOBILE
========================================================= */

@media (max-width: 520px) {

    .drama-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 20px 10px;
    }

    .poster {
        border-radius: 11px;
    }

    .platforms-grid {
        grid-template-columns: 1fr;
    }

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

    .watch-container {
        padding: 15px 0 50px;
    }

    .player-wrapper {
        border-radius: 0;
    }

    .watch-info,
    .episode-navigation {
        margin-left: 15px;
        margin-right: 15px;
    }

    .watch-info h1 {
        font-size: 21px;
    }

    .episode-nav-btn {
        padding: 10px 14px;

        font-size: 13px;
    }

}


/* =========================================================
   31. VERY SMALL SCREENS
========================================================= */

@media (max-width: 360px) {

    .drama-grid {
        gap: 18px 8px;
    }

    .drama-info h3 {
        font-size: 12px;
    }

    .episodes-grid {
        grid-template-columns: 1fr;
    }

}

/* =========================================================
   SEARCH
========================================================= */

.navbar-actions {
    display: flex;
    align-items: center;

    gap: 18px;
}

.navbar-search {
    padding: 8px 14px;

    background: #151515;
    color: #ffffff;

    border: 1px solid #292929;
    border-radius: 50px;

    text-decoration: none;

    font-size: 13px;
    font-weight: 700;

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease;
}

.navbar-search:hover {
    color: #ffffff;

    background: #202020;
    border-color: #444444;
}


.search-header {
    margin-bottom: 28px;
}

.search-eyebrow {
    color: #e50914;

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

.search-header h1 {
    margin: 6px 0 8px;

    font-size: 38px;
    font-weight: 900;
}

.search-header p {
    margin: 0;

    color: #777777;
}


.search-box {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr) 220px 110px;

    gap: 10px;

    margin-bottom: 45px;
}


.search-input-wrapper input,
.search-platform {
    width: 100%;
    height: 52px;

    padding: 0 17px;

    background: #121212;
    color: #ffffff;

    border: 1px solid #292929;
    border-radius: 12px;

    outline: none;

    font-size: 14px;

    transition:
        border-color 0.2s ease,
        background-color 0.2s ease;
}


.search-input-wrapper input:focus,
.search-platform:focus {
    background: #161616;

    border-color: #e50914;
}


.search-input-wrapper input::placeholder {
    color: #666666;
}


.search-platform {
    cursor: pointer;
}


.search-button {
    height: 52px;

    background: #e50914;
    color: #ffffff;

    border: 0;
    border-radius: 12px;

    font-weight: 800;

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        transform 0.2s ease;
}

.search-button:hover {
    background: #ff1724;

    transform: translateY(-2px);
}


.search-results-header {
    display: flex;
    align-items: end;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 25px;
}

.search-results-header span {
    color: #777777;

    font-size: 13px;
}

.search-results-header h2 {
    margin: 4px 0 0;

    color: #ffffff;

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

.search-results-count {
    padding: 7px 12px;

    background: #151515;

    border: 1px solid #292929;
    border-radius: 50px;
}


.search-message {
    padding: 70px 20px;

    text-align: center;

    color: #777777;
}

.search-message h3 {
    margin: 12px 0 7px;

    color: #ffffff;

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

.search-message p {
    margin: 0;
}

.search-empty-icon {
    font-size: 35px;
}

.search-error {
    margin-top: 20px;

    padding: 30px;

    background: #160b0c;

    border: 1px solid #401216;
    border-radius: 14px;
}


@media (max-width: 768px) {

    .search-box {
        grid-template-columns: 1fr;
    }

    .search-button {
        width: 100%;
    }

    .navbar-actions .text-secondary {
        display: none;
    }

}

.result-platform {
    display: inline-block;

    margin-bottom: 5px;

    color: #e50914;

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

    text-transform: uppercase;
}
.arabic-subtitle-available {
    display: inline-flex;
    align-items: center;
    margin-top: 8px;
    padding: 5px 10px;
    border: 1px solid #2d2d2d;
    border-radius: 8px;
    background: #151515;
    color: #bdbdbd;
    font-size: 12px;
    font-weight: 700;
}

.continue-watching-section {
    margin-bottom: 48px;
}

.continue-watching-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
}

.continue-watching-header h2 {
    margin: 0 0 5px;
    color: #ffffff;
    font-size: 24px;
    font-weight: 800;
}

.continue-watching-header p {
    margin: 0;
    color: #888888;
    font-size: 14px;
}

.clear-continue-btn {
    padding: 7px 12px;
    background: transparent;
    color: #888888;
    border: 1px solid #303030;
    border-radius: 9px;
    font-size: 12px;
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.clear-continue-btn:hover {
    color: #ffffff;
    background: #151515;
    border-color: #555555;
}

.continue-watching-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 175px);
    justify-content: start;
    gap: 18px;
}

.continue-card-with-poster {
    width: 175px;
    max-width: 100%;
    overflow: hidden;
    background: #141414;
    color: #ffffff;
    border: 1px solid #282828;
    border-radius: 13px;
    transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.continue-card-with-poster:hover {
    transform: translateY(-4px);
    background: #171717;
    border-color: #444444;
}

.continue-main-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.continue-poster {
    position: relative;
    width: 100%;
    aspect-ratio: 2 / 2.7;
    overflow: hidden;
    background: #1d1d1d;
}

.continue-poster img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.3s ease;
}

.continue-card-with-poster:hover .continue-poster img {
    transform: scale(1.04);
}

.continue-poster-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.68) 0%, rgba(0, 0, 0, 0.08) 45%, transparent 70%);
}

.continue-poster-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #181818;
}

.continue-play-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.95);
    color: #111111;
    border-radius: 50%;
    font-size: 16px;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.continue-card-with-poster:hover .continue-play-overlay {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.06);
}

.continue-card-body {
    padding: 10px;
}

.continue-platform {
    display: block;
    margin-bottom: 3px;
    color: #777777;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
}

.continue-series-title {
    display: block;
    color: #ffffff;
    text-decoration: none;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.continue-series-title:hover {
    color: #ffffff;
}

.continue-episode-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 5px;
    color: #999999;
    font-size: 10px;
}

.continue-progress {
    position: relative;
    width: 100%;
    height: 4px;
    margin-top: 7px;
    overflow: hidden;
    background: #303030;
    border-radius: 20px;
}

.continue-progress-bar {
    height: 100%;
    background: #ffffff;
    border-radius: inherit;
}

.continue-times {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 5px;
    color: #777777;
    font-size: 9px;
}

.continue-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 8px;
    padding-top: 8px;
    color: #aaaaaa;
    border-top: 1px solid #252525;
    text-decoration: none;
    font-size: 10px;
    font-weight: 700;
    transition: color 0.2s ease;
}

.continue-action:hover {
    color: #ffffff;
}

@media (max-width: 768px) {
    .continue-watching-section {
        margin-bottom: 38px;
    }

    .continue-watching-header h2 {
        font-size: 20px;
    }

    .continue-watching-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
    }

    .continue-card-with-poster {
        width: 100%;
    }
}

@media (max-width: 520px) {
    .continue-watching-header {
        align-items: center;
    }

    .continue-watching-header p {
        font-size: 12px;
    }

    .clear-continue-btn {
        padding: 6px 9px;
        font-size: 10px;
    }

    .continue-watching-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .continue-play-overlay {
        width: 42px;
        height: 42px;
        font-size: 14px;
    }

    .continue-card-body {
        padding: 9px;
    }

    .continue-series-title {
        font-size: 12px;
    }
}

@media (max-width: 360px) {
    .continue-watching-grid {
        gap: 8px;
    }

    .continue-card-body {
        padding: 8px;
    }
}
.auth-box {
    width: 100%;
    max-width: 460px;
    padding: 30px;

    background: #111;
    border: 1px solid #252525;
    border-radius: 16px;
}

.auth-box .form-control {
    min-height: 50px;

    background: #171717;
    color: #fff;

    border: 1px solid #303030;
}

.auth-box .form-control:focus {
    background: #171717;
    color: #fff;

    border-color: #e50914;
    box-shadow: none;
}

.auth-box a {
    color: #e50914;
    text-decoration: none;
}

/* =========================================================
   SHORT DRAMA HOME V2.2
   CINEMATIC RED EDITION
========================================================= */

:root {
    --sd-bg: #07080c;
    --sd-surface: #101218;
    --sd-surface-2: #161922;
    --sd-border: rgba(255, 255, 255, 0.09);

    --sd-text: #ffffff;
    --sd-muted: #8f96a3;

    --sd-accent: #e5484d;
    --sd-accent-2: #a72231;
    --sd-accent-soft: rgba(229, 72, 77, 0.13);

    --sd-navbar-height: 72px;
}


/* =========================================================
   HOME
========================================================= */

.sd-home-page {
    margin: 0;

    background:
        radial-gradient(
            circle at 72% 0%,
            rgba(229, 72, 77, 0.055),
            transparent 30%
        ),
        var(--sd-bg);

    color: var(--sd-text);

    direction: ltr;

    overflow-x: hidden;
}

.sd-home {
    width: 100%;
}

.sd-content-shell {
    width: min(1500px, calc(100% - 64px));

    margin: 0 auto;

    padding-bottom: 100px;
}


/* =========================================================
   NAVBAR
========================================================= */

.sd-navbar {
    position: fixed;

    top: 0;
    left: 0;
    right: 0;

    z-index: 900;

    height: var(--sd-navbar-height);

    background:
        linear-gradient(
            to bottom,
            rgba(5, 6, 10, 0.97),
            rgba(5, 6, 10, 0.79)
        );

    border-bottom:
        1px solid rgba(255, 255, 255, 0.06);

    backdrop-filter: blur(18px);
}

.sd-navbar-inner {
    width: min(1500px, calc(100% - 64px));
    height: 100%;

    margin: 0 auto;

    display: flex;
    align-items: center;

    gap: 45px;
}

.sd-brand {
    display: inline-flex;
    align-items: center;

    gap: 10px;

    color: #fff;

    text-decoration: none;

    font-size: 21px;
    font-weight: 900;
}

.sd-brand:hover {
    color: #fff;
}

.sd-brand-icon {
    width: 35px;
    height: 35px;

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

    background:
        linear-gradient(
            135deg,
            var(--sd-accent),
            var(--sd-accent-2)
        );

    color: #fff;

    border-radius: 11px;

    font-size: 13px;

    box-shadow:
        0 8px 30px rgba(229, 72, 77, 0.22);
}

.sd-desktop-nav {
    display: flex;
    align-items: center;

    gap: 28px;
}

.sd-desktop-nav a {
    position: relative;

    color: #9ba0aa;

    text-decoration: none;

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

    transition: color 0.2s ease;
}

.sd-desktop-nav a:hover,
.sd-desktop-nav a.active {
    color: #fff;
}

.sd-desktop-nav a.active::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: -12px;

    width: 5px;
    height: 5px;

    transform: translateX(-50%);

    background: var(--sd-accent);

    border-radius: 50%;
}

.sd-navbar-actions {
    margin-left: auto;

    display: flex;
    align-items: center;

    gap: 10px;
}

.sd-icon-button {
    width: 42px;
    height: 42px;

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

    background: rgba(255, 255, 255, 0.06);

    color: #fff;

    border:
        1px solid rgba(255, 255, 255, 0.08);

    border-radius: 50%;

    text-decoration: none;

    font-size: 24px;

    transition:
        background 0.2s ease,
        border-color 0.2s ease;
}

.sd-icon-button:hover {
    color: #fff;

    background: rgba(255, 255, 255, 0.11);

    border-color: rgba(255, 255, 255, 0.14);
}

.sd-profile-button {
    height: 44px;

    display: flex;
    align-items: center;

    gap: 9px;

    padding: 4px 10px 4px 5px;

    background: rgba(255, 255, 255, 0.06);

    color: #fff;

    border:
        1px solid rgba(255, 255, 255, 0.08);

    border-radius: 50px;

    cursor: pointer;
}

.sd-avatar {
    width: 34px;
    height: 34px;

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

    background:
        linear-gradient(
            135deg,
            var(--sd-accent),
            var(--sd-accent-2)
        );

    border-radius: 50%;

    font-size: 13px;
    font-weight: 900;
}

.sd-profile-name {
    max-width: 130px;

    overflow: hidden;

    text-overflow: ellipsis;
    white-space: nowrap;

    font-size: 13px;
    font-weight: 700;
}

.sd-chevron {
    color: #777e8b;

    font-size: 20px;
}


/* =========================================================
   FEATURED HERO SLIDER
========================================================= */

.sd-hero {
    position: relative;

    min-height: 720px;

    overflow: hidden;

    background: #090a0d;
}

.sd-hero-slide {
    position: absolute;

    inset: 0;

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

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    transition:
        opacity 0.8s ease,
        visibility 0.8s ease;
}

.sd-hero-slide.active {
    z-index: 2;

    opacity: 1;
    visibility: visible;

    pointer-events: auto;
}

.sd-hero-background {
    position: absolute;

    inset: 0;

    background-size: cover;
    background-position: center 22%;

    transform: scale(1.045);

    filter:
        saturate(0.92)
        contrast(1.02);

    transition:
        transform 7s ease;
}

.sd-hero-slide.active .sd-hero-background {
    transform: scale(1);
}

.sd-hero-shade {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(5, 6, 9, 0.98) 0%,
            rgba(5, 6, 9, 0.83) 25%,
            rgba(5, 6, 9, 0.30) 55%,
            rgba(5, 6, 9, 0.08) 100%
        ),
        linear-gradient(
            to top,
            #07080c 0%,
            rgba(7, 8, 12, 0.78) 18%,
            transparent 58%
        );
}

.sd-hero-content {
    position: relative;

    z-index: 3;

    width: min(1500px, calc(100% - 64px));

    margin: 0 auto;

    padding:
        calc(var(--sd-navbar-height) + 100px)
        0
        105px;

    opacity: 0;

    transform: translateY(18px);

    transition:
        opacity 0.65s ease 0.12s,
        transform 0.65s ease 0.12s;
}

.sd-hero-slide.active .sd-hero-content {
    opacity: 1;

    transform: translateY(0);
}

.sd-hero-platform {
    display: inline-flex;

    margin-bottom: 18px;

    padding: 7px 13px;

    background:
        rgba(229, 72, 77, 0.13);

    color: #ff858a;

    border:
        1px solid rgba(229, 72, 77, 0.27);

    border-radius: 50px;

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

    text-transform: uppercase;

    letter-spacing: 1px;
}

.sd-hero-content h1 {
    max-width: 680px;

    margin: 0;

    color: #fff;

    font-size:
        clamp(38px, 4.2vw, 66px);

    font-weight: 900;

    line-height: 1.13;

    text-shadow:
        0 5px 30px rgba(0, 0, 0, 0.55);
}

.sd-hero-meta {
    display: flex;
    flex-wrap: wrap;

    gap: 10px 18px;

    margin-top: 20px;

    color: #d2d4da;

    font-size: 13px;
    font-weight: 700;
}

.sd-hero-description {
    max-width: 620px;

    margin: 18px 0 0;

    color: #b1b5bf;

    font-size: 15px;

    line-height: 1.8;

    display: -webkit-box;

    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;

    overflow: hidden;
}

.sd-hero-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 11px;

    margin-top: 28px;
}

.sd-watch-button,
.sd-list-button {
    min-height: 50px;

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

    gap: 9px;

    padding: 0 22px;

    border-radius: 13px;

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

    text-decoration: none;

    transition:
        transform 0.2s ease,
        background 0.2s ease;
}

.sd-watch-button {
    background: #fff;

    color: #08090c;

    border: 0;
}

.sd-watch-button:hover {
    color: #08090c;

    transform: translateY(-2px);
}

.sd-list-button {
    background:
        rgba(255, 255, 255, 0.10);

    color: #fff;

    border:
        1px solid rgba(255, 255, 255, 0.12);

    backdrop-filter: blur(12px);

    cursor: pointer;
}

.sd-list-button:hover {
    background:
        rgba(255, 255, 255, 0.15);
}


/* =========================================================
   HERO DOTS
========================================================= */

.sd-hero-dots {
    position: absolute;

    z-index: 20;

    left: 50%;
    bottom: 48px;

    display: flex;
    align-items: center;

    gap: 7px;

    transform: translateX(-50%);
}

.sd-hero-dot {
    width: 7px;
    height: 7px;

    padding: 0;

    background:
        rgba(255, 255, 255, 0.35);

    border: 0;

    border-radius: 50px;

    cursor: pointer;

    transition:
        width 0.25s ease,
        background 0.25s ease,
        opacity 0.25s ease;
}

.sd-hero-dot:hover {
    background:
        rgba(255, 255, 255, 0.75);
}

.sd-hero-dot.active {
    width: 28px;

    background: var(--sd-accent);
}


/* =========================================================
   HERO ARROWS
========================================================= */

.sd-hero-arrow {
    position: absolute;

    z-index: 20;

    top: 50%;

    width: 46px;
    height: 58px;

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

    transform: translateY(-50%);

    background:
        rgba(5, 6, 9, 0.43);

    color:
        rgba(255, 255, 255, 0.78);

    border:
        1px solid rgba(255, 255, 255, 0.08);

    backdrop-filter: blur(10px);

    font-size: 31px;

    cursor: pointer;

    opacity: 0;

    transition:
        opacity 0.2s ease,
        background 0.2s ease,
        color 0.2s ease;
}

.sd-hero:hover .sd-hero-arrow {
    opacity: 1;
}

.sd-hero-arrow:hover {
    background:
        rgba(5, 6, 9, 0.80);

    color: #fff;
}

.sd-hero-prev {
    left: 0;

    border-left: 0;

    border-radius:
        0 12px 12px 0;
}

.sd-hero-next {
    right: 0;

    border-right: 0;

    border-radius:
        12px 0 0 12px;
}


/* =========================================================
   PLATFORM STRIP
========================================================= */

.sd-platform-strip {
    position: relative;

    z-index: 5;

    margin-top: -30px;
    margin-bottom: 60px;
}

.sd-platform-scroll {
    display: flex;
    align-items: center;

    gap: 10px;

    padding: 14px;

    overflow-x: auto;

    background:
        rgba(16, 18, 24, 0.88);

    border:
        1px solid rgba(255, 255, 255, 0.08);

    border-radius: 20px;

    backdrop-filter: blur(20px);

    scrollbar-width: none;
}

.sd-platform-scroll::-webkit-scrollbar {
    display: none;
}

.sd-platform-pill {
    flex: 0 0 auto;

    min-height: 50px;

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

    gap: 9px;

    padding: 7px 16px;

    background:
        rgba(255, 255, 255, 0.045);

    color: #a7acb5;

    border:
        1px solid rgba(255, 255, 255, 0.08);

    border-radius: 13px;

    text-decoration: none;

    font-size: 13px;

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

.sd-platform-pill:hover {
    color: #fff;

    background:
        rgba(255, 255, 255, 0.07);

    transform: translateY(-2px);
}

.sd-platform-pill.active {
    background:
        linear-gradient(
            135deg,
            rgba(229, 72, 77, 0.18),
            rgba(167, 34, 49, 0.11)
        );

    color: #fff;

    border-color:
        rgba(229, 72, 77, 0.42);

    box-shadow:
        inset 0 0 0 1px
        rgba(229, 72, 77, 0.04);
}

.sd-platform-pill img,
.sd-platform-letter {
    width: 32px;
    height: 32px;

    flex: 0 0 32px;

    object-fit: contain;

    border-radius: 9px;
}

.sd-platform-letter {
    display: flex;
    align-items: center;
    justify-content: center;

    background: #222632;

    color: #fff;

    font-weight: 900;
}

.sd-platform-more {
    color: #fff;
}


/* =========================================================
   HOME SECTIONS
========================================================= */

.sd-home-section {
    margin-bottom: 65px;
}

.sd-section-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 20px;
}

.sd-section-eyebrow {
    display: block;

    margin-bottom: 5px;

    color: var(--sd-accent);

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

    letter-spacing: 1.5px;
}

.sd-section-header h2 {
    margin: 0;

    color: #fff;

    font-size: 26px;
    font-weight: 900;
}

.sd-section-action {
    padding: 0;

    background: none;

    color: #9096a2;

    border: 0;

    text-decoration: none;

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

    cursor: pointer;
}

.sd-section-action:hover {
    color: #fff;
}


/* =========================================================
   HORIZONTAL DRAMA ROW
========================================================= */

.sd-horizontal-row {
    display: grid;

    grid-auto-flow: column;

    grid-auto-columns:
        clamp(155px, 14vw, 215px);

    justify-content: start;

    gap: 16px;

    overflow-x: auto;

    padding: 3px 2px 15px;

    scroll-snap-type: x proximity;

    scrollbar-width: none;
}

.sd-horizontal-row::-webkit-scrollbar {
    display: none;
}

.sd-poster-card,
.sd-continue-card {
    min-width: 0;

    color: #fff;

    text-decoration: none;

    scroll-snap-align: start;

    transition:
        transform 0.25s ease;
}

.sd-poster-card:hover,
.sd-continue-card:hover {
    color: #fff;

    transform: translateY(-5px);
}

.sd-poster-image,
.sd-continue-image {
    position: relative;

    width: 100%;

    aspect-ratio: 2 / 3;

    overflow: hidden;

    background: #15171d;

    border:
        1px solid rgba(255, 255, 255, 0.07);

    border-radius: 16px;
}

.sd-poster-image img,
.sd-continue-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform 0.35s ease;
}

.sd-poster-card:hover img,
.sd-continue-card:hover img {
    transform: scale(1.045);
}

.sd-card-gradient {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(0, 0, 0, 0.60),
            transparent 45%
        );
}

.sd-card-status {
    position: absolute;

    top: 10px;
    left: 10px;

    padding: 5px 8px;

    background:
        rgba(6, 7, 10, 0.75);

    color: #fff;

    border:
        1px solid rgba(255, 255, 255, 0.10);

    border-radius: 7px;

    backdrop-filter: blur(8px);

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

.sd-card-play {
    position: absolute;

    left: 50%;
    top: 50%;

    z-index: 3;

    width: 46px;
    height: 46px;

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

    transform:
        translate(-50%, -50%)
        scale(0.9);

    background:
        rgba(255, 255, 255, 0.94);

    color: #08090c;

    border-radius: 50%;

    opacity: 0;

    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
}

.sd-poster-card:hover .sd-card-play,
.sd-continue-card:hover .sd-card-play {
    opacity: 1;

    transform:
        translate(-50%, -50%)
        scale(1);
}

.sd-poster-info {
    padding-top: 11px;
}

.sd-poster-info h3 {
    margin: 0;

    color: #fff;

    overflow: hidden;

    text-overflow: ellipsis;
    white-space: nowrap;

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

.sd-poster-info p {
    margin: 5px 0 0;

    color: #747b87;

    overflow: hidden;

    text-overflow: ellipsis;
    white-space: nowrap;

    font-size: 11px;
}


/* =========================================================
   CONTINUE WATCHING
========================================================= */

.sd-continue-progress {
    position: absolute;

    left: 9px;
    right: 9px;
    bottom: 9px;

    height: 4px;

    overflow: hidden;

    background:
        rgba(255, 255, 255, 0.25);

    border-radius: 10px;
}

.sd-continue-progress div {
    height: 100%;

    background:
        linear-gradient(
            90deg,
            var(--sd-accent),
            var(--sd-accent-2)
        );

    border-radius: inherit;
}


/* =========================================================
   PREMIUM CTA
========================================================= */

.sd-premium-cta {
    position: relative;

    min-height: 330px;

    display: grid;

    grid-template-columns:
        minmax(0, 1.2fr)
        minmax(300px, 0.8fr);

    align-items: center;

    gap: 55px;

    margin: 10px 0 70px;

    padding: 52px;

    overflow: hidden;

    background:
        linear-gradient(
            125deg,
            #181013 0%,
            #111217 50%,
            #0b0c10 100%
        );

    border:
        1px solid rgba(229, 72, 77, 0.15);

    border-radius: 26px;

    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.18);
}

.sd-premium-cta::after {
    content: "";

    position: absolute;

    top: -80px;
    right: -80px;

    width: 280px;
    height: 280px;

    border:
        1px solid rgba(229, 72, 77, 0.08);

    border-radius: 50%;
}

.sd-premium-glow {
    position: absolute;

    left: -140px;
    bottom: -280px;

    width: 470px;
    height: 470px;

    background:
        rgba(229, 72, 77, 0.17);

    filter: blur(100px);

    border-radius: 50%;

    pointer-events: none;
}

.sd-premium-content,
.sd-premium-benefits {
    position: relative;

    z-index: 2;
}

.sd-premium-label {
    color: #ef656a;

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

    letter-spacing: 1.7px;
}

.sd-premium-content h2 {
    max-width: 680px;

    margin: 10px 0 14px;

    color: #fff;

    font-size:
        clamp(31px, 3.3vw, 50px);

    font-weight: 900;

    line-height: 1.08;
}

.sd-premium-content p {
    max-width: 570px;

    margin: 0;

    color: #9298a3;

    font-size: 14px;

    line-height: 1.75;
}

.sd-premium-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 10px;

    margin-top: 26px;
}

.sd-premium-button,
.sd-premium-plans {
    min-height: 49px;

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

    gap: 8px;

    padding: 0 20px;

    border-radius: 12px;

    text-decoration: none;

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

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

.sd-premium-button {
    background:
        linear-gradient(
            135deg,
            var(--sd-accent),
            var(--sd-accent-2)
        );

    color: #fff;

    border:
        1px solid rgba(255, 255, 255, 0.05);

    box-shadow:
        0 13px 35px rgba(229, 72, 77, 0.17);
}

.sd-premium-button:hover {
    color: #fff;

    transform: translateY(-2px);
}

.sd-premium-plans {
    background:
        rgba(255, 255, 255, 0.055);

    color: #d6d8dd;

    border:
        1px solid rgba(255, 255, 255, 0.09);
}

.sd-premium-plans:hover {
    background:
        rgba(255, 255, 255, 0.09);

    color: #fff;
}

.sd-premium-benefits {
    display: grid;

    gap: 10px;
}

.sd-premium-benefits > div {
    min-height: 79px;

    display: grid;

    grid-template-columns:
        44px 1fr;

    grid-template-rows:
        auto auto;

    column-gap: 13px;

    align-items: center;

    padding: 13px 16px;

    background:
        rgba(255, 255, 255, 0.035);

    border:
        1px solid rgba(255, 255, 255, 0.065);

    border-radius: 15px;

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

.sd-premium-benefits > div:hover {
    background:
        rgba(255, 255, 255, 0.055);

    border-color:
        rgba(229, 72, 77, 0.15);

    transform: translateX(-3px);
}

.sd-premium-benefits span {
    grid-row: 1 / 3;

    width: 44px;
    height: 44px;

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

    background:
        rgba(229, 72, 77, 0.10);

    color: #ef656a;

    border:
        1px solid rgba(229, 72, 77, 0.11);

    border-radius: 12px;

    font-size: 17px;
}

.sd-premium-benefits strong {
    align-self: end;

    color: #fff;

    font-size: 12px;
}

.sd-premium-benefits small {
    align-self: start;

    margin-top: 2px;

    color: #777e89;

    font-size: 10px;
}


/* =========================================================
   EXPLORE BANNER
========================================================= */

.sd-explore-banner {
    min-height: 220px;

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

    gap: 30px;

    padding: 40px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 80% 50%,
            rgba(229, 72, 77, 0.12),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #15171d,
            #0e1015
        );

    border:
        1px solid rgba(255, 255, 255, 0.08);

    border-radius: 24px;
}

.sd-explore-banner span {
    color: var(--sd-accent);

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

    letter-spacing: 1.5px;
}

.sd-explore-banner h2 {
    max-width: 600px;

    margin: 7px 0 10px;

    color: #fff;

    font-size:
        clamp(24px, 3vw, 38px);

    font-weight: 900;
}

.sd-explore-banner p {
    max-width: 600px;

    margin: 0;

    color: #858b97;

    line-height: 1.7;
}


/* =========================================================
   ACCOUNT SIDEBAR
========================================================= */

.sd-sidebar-overlay {
    position: fixed;

    inset: 0;

    z-index: 1998;

    background:
        rgba(0, 0, 0, 0.65);

    backdrop-filter: blur(3px);

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 0.25s ease,
        visibility 0.25s ease;
}

.sd-sidebar-overlay.open {
    opacity: 1;
    visibility: visible;
}

.sd-account-sidebar {
    position: fixed;

    top: 0;
    right: 0;
    bottom: 0;

    z-index: 1999;

    width: min(440px, 100%);

    padding: 22px;

    overflow-y: auto;

    background:
        linear-gradient(
            180deg,
            #101218,
            #090b10
        );

    border-left:
        1px solid rgba(255, 255, 255, 0.08);

    box-shadow:
        -30px 0 80px rgba(0, 0, 0, 0.45);

    transform:
        translateX(105%);

    transition:
        transform 0.3s ease;
}

.sd-account-sidebar.open {
    transform: translateX(0);
}

body.sd-sidebar-open {
    overflow: hidden;
}

.sd-sidebar-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding-bottom: 22px;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.07);
}

.sd-sidebar-brand {
    display: flex;
    align-items: center;

    gap: 11px;
}

.sd-sidebar-brand strong,
.sd-sidebar-brand small {
    display: block;
}

.sd-sidebar-brand strong {
    font-size: 17px;
}

.sd-sidebar-brand small {
    margin-top: 2px;

    color: #707785;

    font-size: 10px;
}

.sd-sidebar-close {
    width: 42px;
    height: 42px;

    background:
        rgba(255, 255, 255, 0.06);

    color: #c7cbd3;

    border:
        1px solid rgba(255, 255, 255, 0.08);

    border-radius: 12px;

    font-size: 25px;

    cursor: pointer;
}

.sd-account-card {
    margin-top: 22px;

    padding: 22px;

    background:
        linear-gradient(
            135deg,
            rgba(229, 72, 77, 0.14),
            rgba(167, 34, 49, 0.055)
        );

    border:
        1px solid rgba(229, 72, 77, 0.17);

    border-radius: 20px;
}

.sd-account-heading {
    display: flex;
    align-items: center;

    gap: 11px;
}

.sd-account-avatar {
    width: 50px;
    height: 50px;

    flex: 0 0 50px;

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

    background:
        rgba(255, 255, 255, 0.10);

    border:
        1px solid rgba(255, 255, 255, 0.13);

    border-radius: 15px;

    font-size: 18px;
    font-weight: 900;
}

.sd-account-person {
    min-width: 0;
}

.sd-account-person small,
.sd-account-person strong {
    display: block;
}

.sd-account-person small {
    color: #989fac;

    font-size: 11px;
}

.sd-account-person strong {
    max-width: 190px;

    margin-top: 2px;

    overflow: hidden;

    text-overflow: ellipsis;
    white-space: nowrap;

    font-size: 16px;
}

.sd-plan-badge {
    margin-left: auto;

    padding: 6px 9px;

    border-radius: 50px;

    font-size: 9px;
    font-weight: 900;
}

.sd-plan-free {
    background:
        rgba(255, 255, 255, 0.08);

    color: #c3c7ce;
}

.sd-account-plan {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 15px;

    margin-top: 22px;

    padding-top: 18px;

    border-top:
        1px solid rgba(255, 255, 255, 0.09);
}

.sd-account-plan span,
.sd-account-plan strong {
    display: block;
}

.sd-account-plan span {
    color: #858c98;

    font-size: 10px;
}

.sd-account-plan strong {
    margin-top: 3px;

    font-size: 14px;
}

.sd-upgrade-button {
    padding: 9px 13px;

    background: #fff;

    color: #0b0c10;

    border-radius: 10px;

    text-decoration: none;

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

.sd-upgrade-button:hover {
    color: #0b0c10;
}

.sd-guest-card {
    margin-top: 22px;

    padding: 28px 22px;

    background:
        linear-gradient(
            145deg,
            #151822,
            #101218
        );

    border:
        1px solid rgba(255, 255, 255, 0.08);

    border-radius: 20px;

    text-align: center;
}

.sd-guest-avatar {
    width: 58px;
    height: 58px;

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

    margin: 0 auto 15px;

    background:
        linear-gradient(
            135deg,
            var(--sd-accent),
            var(--sd-accent-2)
        );

    border-radius: 18px;

    font-weight: 900;
}

.sd-guest-card h3 {
    margin: 0;

    font-size: 18px;
}

.sd-guest-card p {
    margin: 10px 0 20px;

    color: #7d8490;

    font-size: 12px;

    line-height: 1.7;
}

.sd-sidebar-primary,
.sd-sidebar-secondary {
    min-height: 44px;

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

    border-radius: 11px;

    text-decoration: none;

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

.sd-sidebar-primary {
    background:
        linear-gradient(
            135deg,
            var(--sd-accent),
            var(--sd-accent-2)
        );

    color: #fff;
}

.sd-sidebar-primary:hover {
    color: #fff;
}

.sd-sidebar-secondary {
    margin-top: 8px;

    background:
        rgba(255, 255, 255, 0.05);

    color: #fff;

    border:
        1px solid rgba(255, 255, 255, 0.08);
}

.sd-sidebar-section {
    margin-top: 30px;
}

.sd-sidebar-label {
    display: block;

    margin: 0 4px 12px;

    color: #636a77;

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

    letter-spacing: 1.4px;
}

.sd-quick-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 9px;
}

.sd-quick-item {
    min-height: 90px;

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

    gap: 8px;

    background:
        rgba(255, 255, 255, 0.045);

    color: #afb4be;

    border:
        1px solid rgba(255, 255, 255, 0.07);

    border-radius: 15px;

    text-decoration: none;
}

.sd-quick-item:hover {
    background:
        rgba(255, 255, 255, 0.075);

    color: #fff;
}

.sd-quick-item span {
    color: #ef656a;

    font-size: 21px;
}

.sd-quick-item small {
    font-size: 10px;
    font-weight: 700;
}

.sd-sidebar-list {
    overflow: hidden;

    background:
        rgba(255, 255, 255, 0.035);

    border:
        1px solid rgba(255, 255, 255, 0.07);

    border-radius: 16px;
}

.sd-sidebar-row {
    width: 100%;
    min-height: 55px;

    display: grid;

    grid-template-columns:
        25px 1fr auto;

    align-items: center;

    gap: 10px;

    padding: 0 16px;

    background: transparent;

    color: #bdc1ca;

    border: 0;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.055);

    text-decoration: none;

    text-align: left;

    cursor: pointer;
}

.sd-sidebar-row:last-child {
    border-bottom: 0;
}

.sd-sidebar-row:hover {
    background:
        rgba(255, 255, 255, 0.045);

    color: #fff;
}

.sd-sidebar-row strong {
    font-size: 12px;
}

.sd-sidebar-row b {
    color: #565d69;

    font-size: 18px;
}

.sd-sidebar-row em {
    color: #707785;

    font-size: 10px;

    font-style: normal;
}

.sd-admin-row span {
    color: #e7ad5b;
}

.sd-logout-form {
    margin-top: 18px;
}

.sd-logout-button {
    width: 100%;
    min-height: 48px;

    background:
        rgba(255, 72, 91, 0.08);

    color: #ff6574;

    border:
        1px solid rgba(255, 72, 91, 0.13);

    border-radius: 13px;

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

    cursor: pointer;
}


/* =========================================================
   MOBILE NAV
========================================================= */

.sd-mobile-nav {
    display: none;
}


/* =========================================================
   EMPTY STATE
========================================================= */

.sd-empty {
    padding: 60px 20px;

    color: #737985;

    text-align: center;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .sd-premium-cta {
        grid-template-columns: 1fr;

        gap: 32px;
    }

    .sd-premium-benefits {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

    .sd-premium-benefits > div {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;

        gap: 7px;

        text-align: center;
    }

    .sd-premium-benefits span {
        grid-row: auto;

        margin: 0 auto;
    }

}


@media (max-width: 900px) {

    .sd-desktop-nav {
        display: none;
    }

    .sd-content-shell,
    .sd-navbar-inner,
    .sd-hero-content {
        width:
            min(
                calc(100% - 32px),
                1500px
            );
    }

    .sd-hero {
        min-height: 650px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 650px) {

    :root {
        --sd-navbar-height: 62px;
    }

    .sd-home-page {
        padding-bottom: 78px;
    }

    .sd-navbar-inner {
        width: calc(100% - 28px);
    }

    .sd-brand {
        font-size: 18px;
    }

    .sd-brand-icon {
        width: 32px;
        height: 32px;
    }

    .sd-profile-name,
    .sd-chevron {
        display: none;
    }

    .sd-profile-button {
        width: 42px;

        padding: 3px;

        justify-content: center;
    }

    .sd-avatar {
        width: 34px;
        height: 34px;
    }


    /* HERO */

    .sd-hero {
        min-height: 670px;
    }

    .sd-hero-slide {
        align-items: flex-end;
    }

    .sd-hero-background {
        background-position: center top;
    }

    .sd-hero-shade {
        background:
            linear-gradient(
                to top,
                #07080c 0%,
                rgba(7, 8, 12, 0.95) 25%,
                rgba(7, 8, 12, 0.38) 60%,
                rgba(7, 8, 12, 0.14) 100%
            );
    }

    .sd-hero-content {
        width: calc(100% - 32px);

        padding:
            150px 0
            72px;
    }

    .sd-hero-platform {
        margin-bottom: 12px;

        padding: 6px 11px;

        font-size: 9px;
    }

    .sd-hero-content h1 {
        max-width: 95%;

        font-size:
            clamp(31px, 9.5vw, 45px);

        line-height: 1.15;
    }

    .sd-hero-meta {
        margin-top: 14px;

        font-size: 11px;
    }

    .sd-hero-description {
        max-width: 95%;

        margin-top: 13px;

        font-size: 12px;

        line-height: 1.65;

        -webkit-line-clamp: 2;
    }

    .sd-hero-actions {
        width: 100%;

        margin-top: 20px;
    }

    .sd-watch-button {
        flex: 1;
    }

    .sd-list-button {
        width: 52px;

        padding: 0;

        font-size: 0;
    }

    .sd-list-button span {
        font-size: 20px;
    }

    .sd-hero-arrow {
        display: none;
    }

    .sd-hero-dots {
        bottom: 25px;
    }

    .sd-hero-dot {
        width: 6px;
        height: 6px;
    }

    .sd-hero-dot.active {
        width: 23px;
    }


    /* CONTENT */

    .sd-content-shell {
        width: calc(100% - 28px);

        padding-bottom: 40px;
    }

    .sd-platform-strip {
        margin-top: -15px;
        margin-bottom: 45px;
    }

    .sd-platform-scroll {
        margin-left: -14px;
        margin-right: -14px;

        padding: 12px 14px;

        border-left: 0;
        border-right: 0;

        border-radius: 0;
    }

    .sd-platform-pill {
        min-height: 46px;

        padding: 6px 13px;
    }

    .sd-platform-pill img,
    .sd-platform-letter {
        width: 29px;
        height: 29px;

        flex-basis: 29px;
    }

    .sd-home-section {
        margin-bottom: 48px;
    }

    .sd-section-header {
        align-items: center;
    }

    .sd-section-header h2 {
        font-size: 21px;
    }

    .sd-section-eyebrow {
        font-size: 8px;
    }

    .sd-horizontal-row {
        grid-auto-columns: 42vw;

        margin-left: -14px;
        margin-right: -14px;

        padding-left: 14px;
        padding-right: 14px;
    }

    .sd-poster-image,
    .sd-continue-image {
        border-radius: 13px;
    }

    .sd-card-play {
        width: 40px;
        height: 40px;

        opacity: 1;

        background:
            rgba(255, 255, 255, 0.90);

        font-size: 12px;
    }


    /* PREMIUM */

    .sd-premium-cta {
        min-height: 0;

        grid-template-columns: 1fr;

        gap: 30px;

        margin-bottom: 50px;

        padding: 31px 22px;

        border-radius: 20px;
    }

    .sd-premium-content h2 {
        margin-top: 9px;

        font-size: 30px;
    }

    .sd-premium-content p {
        font-size: 12px;
    }

    .sd-premium-actions {
        display: grid;

        grid-template-columns:
            1fr 1fr;

        width: 100%;
    }

    .sd-premium-button,
    .sd-premium-plans {
        padding: 0 10px;
    }

    .sd-premium-benefits {
        grid-template-columns: 1fr;

        gap: 8px;
    }

    .sd-premium-benefits > div {
        grid-template-columns:
            42px 1fr;

        grid-template-rows:
            auto auto;

        gap: 0 12px;

        text-align: left;
    }

    .sd-premium-benefits span {
        grid-row: 1 / 3;

        margin: 0;
    }


    /* EXPLORE */

    .sd-explore-banner {
        min-height: 260px;

        align-items: flex-start;
        flex-direction: column;

        padding: 28px 23px;
    }

    .sd-explore-banner .sd-watch-button {
        flex: 0 0 auto;
    }


    /* SIDEBAR */

    .sd-account-sidebar {
        width: 100%;

        padding:
            18px 16px 100px;

        border-left: 0;
    }


    /* MOBILE NAV */

    .sd-mobile-nav {
        position: fixed;

        left: 0;
        right: 0;
        bottom: 0;

        z-index: 850;

        height: 72px;

        display: grid;

        grid-template-columns:
            repeat(5, 1fr);

        padding:
            5px 5px
            max(
                5px,
                env(safe-area-inset-bottom)
            );

        background:
            rgba(12, 14, 19, 0.96);

        border-top:
            1px solid rgba(255, 255, 255, 0.08);

        backdrop-filter: blur(18px);
    }

    .sd-mobile-nav a,
    .sd-mobile-nav button {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        gap: 3px;

        background: transparent;

        color: #747b87;

        border: 0;

        text-decoration: none;

        cursor: pointer;
    }

    .sd-mobile-nav span {
        font-size: 20px;
    }

    .sd-mobile-nav small {
        font-size: 8px;
        font-weight: 700;
    }

    .sd-mobile-nav .active {
        color: var(--sd-accent);
    }

}


@media (max-width: 370px) {

    .sd-horizontal-row {
        grid-auto-columns: 46vw;
    }

    .sd-quick-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .sd-premium-actions {
        grid-template-columns: 1fr;
    }

}
/* =========================================================
   SHORTDRAMA ADMIN PANEL
   Cinematic Red Edition
========================================================= */

:root {
    --admin-bg: #07080c;
    --admin-surface: #0f1117;
    --admin-surface-2: #151820;
    --admin-surface-3: #1b1f29;
    --admin-border: rgba(255, 255, 255, 0.08);
    --admin-border-strong: rgba(255, 255, 255, 0.13);

    --admin-text: #ffffff;
    --admin-muted: #8f96a3;
    --admin-muted-2: #666e7b;

    --admin-red: #e5484d;
    --admin-red-dark: #a72231;
    --admin-red-soft: rgba(229, 72, 77, 0.12);

    --admin-green: #4dcc8b;
    --admin-green-soft: rgba(77, 204, 139, 0.12);

    --admin-yellow: #e7ad5b;

    --admin-sidebar-width: 280px;
}


/* =========================================================
   BASE
========================================================= */

body.admin-page {
    margin: 0;
    min-height: 100vh;
    background:
        radial-gradient(
            circle at 80% -10%,
            rgba(229, 72, 77, 0.08),
            transparent 30%
        ),
        #07080c;

    color: var(--admin-text);
    overflow-x: hidden;
}

.admin-page *,
.admin-page *::before,
.admin-page *::after {
    box-sizing: border-box;
}

.admin-page a {
    text-decoration: none;
}


/* =========================================================
   SIDEBAR
========================================================= */

.admin-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;

    width: var(--admin-sidebar-width);

    display: flex;
    flex-direction: column;

    background:
        linear-gradient(
            180deg,
            rgba(20, 22, 29, 0.98),
            rgba(8, 9, 13, 0.99)
        );

    border-right: 1px solid var(--admin-border);

    z-index: 1100;
}

.admin-sidebar-brand {
    min-height: 88px;

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

    padding: 18px 22px;

    border-bottom: 1px solid var(--admin-border);
}

.admin-brand {
    display: flex;
    align-items: center;
    gap: 12px;

    color: #fff;
}

.admin-brand:hover {
    color: #fff;
}

.admin-brand-icon {
    width: 42px;
    height: 42px;

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

    border-radius: 13px;

    background:
        linear-gradient(
            135deg,
            var(--admin-red),
            var(--admin-red-dark)
        );

    color: #fff;

    font-size: 16px;

    box-shadow:
        0 10px 30px rgba(229, 72, 77, 0.22);
}

.admin-brand > span:last-child {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.admin-brand strong {
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.3px;
}

.admin-brand small {
    color: var(--admin-muted);

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

    letter-spacing: 1.8px;
}

.admin-sidebar-close {
    display: none;

    width: 36px;
    height: 36px;

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

    border: 0;
    border-radius: 10px;

    background: rgba(255, 255, 255, 0.05);
    color: #fff;

    font-size: 25px;
    line-height: 1;

    cursor: pointer;
}


/* =========================================================
   ADMIN PROFILE
========================================================= */

.admin-profile-card {
    margin: 20px 16px 12px;
    padding: 15px;

    display: flex;
    align-items: center;
    gap: 12px;

    border: 1px solid rgba(229, 72, 77, 0.15);
    border-radius: 16px;

    background:
        linear-gradient(
            135deg,
            rgba(229, 72, 77, 0.10),
            rgba(255, 255, 255, 0.025)
        );
}

.admin-profile-avatar,
.admin-top-avatar {
    flex: 0 0 auto;

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

    background:
        linear-gradient(
            135deg,
            var(--admin-red),
            var(--admin-red-dark)
        );

    color: #fff;

    font-weight: 900;

    box-shadow:
        0 8px 24px rgba(229, 72, 77, 0.18);
}

.admin-profile-avatar {
    width: 44px;
    height: 44px;

    border-radius: 14px;

    font-size: 17px;
}

.admin-profile-info {
    min-width: 0;

    display: flex;
    flex-direction: column;
}

.admin-profile-info small {
    color: var(--admin-muted);

    font-size: 10px;
}

.admin-profile-info strong {
    margin-top: 1px;

    overflow: hidden;

    color: #fff;

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

    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-profile-info span {
    margin-top: 3px;

    color: var(--admin-red);

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

    letter-spacing: 0.6px;
    text-transform: uppercase;
}


/* =========================================================
   SIDEBAR NAVIGATION
========================================================= */

.admin-nav {
    flex: 1;

    padding: 12px 14px;

    overflow-y: auto;
}

.admin-nav-label {
    display: block;

    padding: 8px 11px;

    color: #555d6a;

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

    letter-spacing: 1.5px;
}

.admin-nav-label-spaced {
    margin-top: 16px;
}

.admin-nav-item {
    min-height: 48px;

    display: flex;
    align-items: center;
    gap: 13px;

    margin: 3px 0;
    padding: 0 13px;

    border: 1px solid transparent;
    border-radius: 12px;

    color: #a3a9b4;

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

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

.admin-nav-item:hover {
    background: rgba(255, 255, 255, 0.04);
    color: #fff;

    transform: translateX(2px);
}

.admin-nav-item.active {
    border-color: rgba(229, 72, 77, 0.16);

    background:
        linear-gradient(
            90deg,
            rgba(229, 72, 77, 0.14),
            rgba(229, 72, 77, 0.035)
        );

    color: #fff;
}

.admin-nav-item.active .admin-nav-icon {
    color: var(--admin-red);
}

.admin-nav-icon {
    width: 24px;

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

    color: #777f8d;

    font-size: 18px;
}


/* =========================================================
   SIDEBAR FOOTER
========================================================= */

.admin-sidebar-footer {
    padding: 17px;

    border-top: 1px solid var(--admin-border);
}

.admin-system-status {
    display: flex;
    align-items: center;
    gap: 10px;
}

.admin-status-dot {
    width: 8px;
    height: 8px;

    flex: 0 0 auto;

    border-radius: 50%;

    background: var(--admin-green);

    box-shadow:
        0 0 0 4px rgba(77, 204, 139, 0.08),
        0 0 14px rgba(77, 204, 139, 0.4);
}

.admin-system-status div {
    display: flex;
    flex-direction: column;
}

.admin-system-status strong {
    color: #d7dbe2;

    font-size: 11px;
}

.admin-system-status small {
    margin-top: 2px;

    color: #666e7b;

    font-size: 9px;
}


/* =========================================================
   SIDEBAR OVERLAY
========================================================= */

.admin-sidebar-overlay {
    position: fixed;
    inset: 0;

    display: none;

    background: rgba(0, 0, 0, 0.68);

    backdrop-filter: blur(4px);

    z-index: 1090;
}

.admin-sidebar-overlay.open {
    display: block;
}


/* =========================================================
   MAIN
========================================================= */

.admin-main {
    min-height: 100vh;

    margin-left: var(--admin-sidebar-width);
}


/* =========================================================
   TOPBAR
========================================================= */

.admin-topbar {
    position: sticky;
    top: 0;

    min-height: 88px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;

    padding: 15px 32px;

    border-bottom: 1px solid var(--admin-border);

    background: rgba(7, 8, 12, 0.82);

    backdrop-filter: blur(18px);

    z-index: 100;
}

.admin-topbar-left,
.admin-topbar-right {
    display: flex;
    align-items: center;
}

.admin-topbar-left {
    gap: 14px;
}

.admin-topbar-right {
    gap: 14px;
}

.admin-page-eyebrow {
    display: block;

    margin-bottom: 3px;

    color: var(--admin-red);

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

    letter-spacing: 1.6px;
}

.admin-topbar h1 {
    margin: 0;

    color: #fff;

    font-size: 23px;
    font-weight: 850;

    letter-spacing: -0.5px;
}

.admin-menu-button {
    display: none;

    width: 42px;
    height: 42px;

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

    border: 1px solid var(--admin-border);
    border-radius: 11px;

    background: rgba(255, 255, 255, 0.04);
    color: #fff;

    font-size: 19px;

    cursor: pointer;
}

.admin-view-site,
.admin-back-button {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    padding: 10px 14px;

    border: 1px solid var(--admin-border);
    border-radius: 11px;

    background: rgba(255, 255, 255, 0.035);

    color: #c5cad3;

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

    transition: 0.2s ease;
}

.admin-view-site:hover,
.admin-back-button:hover {
    border-color: rgba(229, 72, 77, 0.25);

    background: var(--admin-red-soft);

    color: #fff;
}

.admin-top-avatar {
    width: 38px;
    height: 38px;

    border-radius: 12px;

    font-size: 14px;
}

.admin-users-total {
    color: var(--admin-muted);

    font-size: 12px;
    font-weight: 700;
}


/* =========================================================
   CONTENT
========================================================= */

.admin-content {
    width: min(1500px, calc(100% - 64px));

    margin: 0 auto;

    padding: 32px 0 70px;
}


/* =========================================================
   WELCOME
========================================================= */

.admin-welcome {
    position: relative;

    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;

    margin-bottom: 26px;
    padding: 30px 32px;

    border: 1px solid rgba(229, 72, 77, 0.12);
    border-radius: 22px;

    background:
        radial-gradient(
            circle at 90% 20%,
            rgba(229, 72, 77, 0.14),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #12141b,
            #0c0e13
        );
}

.admin-welcome::after {
    content: "";

    position: absolute;
    top: -120px;
    right: -100px;

    width: 280px;
    height: 280px;

    border: 1px solid rgba(229, 72, 77, 0.08);
    border-radius: 50%;

    pointer-events: none;
}

.admin-welcome-label,
.admin-panel-eyebrow {
    display: block;

    margin-bottom: 7px;

    color: var(--admin-red);

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

    letter-spacing: 1.5px;
}

.admin-welcome h2 {
    margin: 0;

    color: #fff;

    font-size: clamp(23px, 3vw, 34px);
    font-weight: 850;

    letter-spacing: -0.8px;
}

.admin-welcome p {
    max-width: 650px;

    margin: 8px 0 0;

    color: var(--admin-muted);

    font-size: 13px;
    line-height: 1.7;
}

.admin-primary-button {
    position: relative;

    z-index: 2;

    flex: 0 0 auto;

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

    min-height: 46px;

    padding: 0 18px;

    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            var(--admin-red),
            var(--admin-red-dark)
        );

    color: #fff;

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

    box-shadow:
        0 12px 32px rgba(229, 72, 77, 0.17);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.admin-primary-button:hover {
    color: #fff;

    transform: translateY(-2px);

    box-shadow:
        0 15px 38px rgba(229, 72, 77, 0.25);
}


/* =========================================================
   DASHBOARD STAT CARDS
========================================================= */

.admin-stats-grid {
    display: grid;

    grid-template-columns:
        repeat(5, minmax(0, 1fr));

    gap: 14px;

    margin-bottom: 26px;
}

.admin-stat-card {
    position: relative;

    overflow: hidden;

    min-height: 178px;

    display: flex;
    flex-direction: column;

    padding: 19px;

    border: 1px solid var(--admin-border);
    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            rgba(22, 24, 32, 0.95),
            rgba(13, 15, 20, 0.98)
        );

    color: #fff;

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

a.admin-stat-card:hover {
    border-color: rgba(229, 72, 77, 0.22);

    color: #fff;

    transform: translateY(-3px);
}

.admin-stat-card::after {
    content: "";

    position: absolute;
    right: -40px;
    bottom: -50px;

    width: 120px;
    height: 120px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.015);

    pointer-events: none;
}

.admin-stat-premium {
    border-color: rgba(229, 72, 77, 0.17);

    background:
        radial-gradient(
            circle at 100% 100%,
            rgba(229, 72, 77, 0.11),
            transparent 55%
        ),
        linear-gradient(
            145deg,
            rgba(22, 24, 32, 0.95),
            rgba(13, 15, 20, 0.98)
        );
}

.admin-stat-danger {
    border-color: rgba(229, 72, 77, 0.13);
}

.admin-stat-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 20px;
}

.admin-stat-icon {
    width: 34px;
    height: 34px;

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

    border-radius: 10px;

    background: rgba(255, 255, 255, 0.05);

    color: #d6dae1;

    font-size: 17px;
}

.admin-stat-premium .admin-stat-icon {
    background: var(--admin-red-soft);

    color: var(--admin-red);
}

.admin-stat-tag {
    color: #5f6672;

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

    letter-spacing: 1.2px;
}

.admin-stat-card > strong {
    color: #fff;

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

    line-height: 1;
}

.admin-stat-title {
    margin-top: 7px;

    color: #d9dce2;

    font-size: 12px;
    font-weight: 750;
}

.admin-stat-card > small {
    margin-top: 4px;

    color: var(--admin-muted-2);

    font-size: 9px;
}


/* =========================================================
   PANELS
========================================================= */

.admin-panel {
    overflow: hidden;

    margin-bottom: 22px;

    border: 1px solid var(--admin-border);
    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            rgba(18, 20, 27, 0.96),
            rgba(12, 14, 19, 0.98)
        );
}

.admin-panel-header {
    min-height: 76px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    padding: 18px 22px;

    border-bottom: 1px solid var(--admin-border);
}

.admin-panel-header h2 {
    margin: 0;

    color: #fff;

    font-size: 17px;
    font-weight: 820;
}

.admin-panel-action {
    color: var(--admin-muted);

    font-size: 11px;
    font-weight: 750;

    transition: color 0.2s ease;
}

.admin-panel-action:hover {
    color: var(--admin-red);
}


/* =========================================================
   RECENT USERS
========================================================= */

.admin-users-list {
    padding: 7px;
}

.admin-recent-user {
    min-height: 70px;

    display: flex;
    align-items: center;
    gap: 13px;

    padding: 10px 14px;

    border: 1px solid transparent;
    border-radius: 14px;

    color: #fff;

    transition:
        background 0.2s ease,
        border-color 0.2s ease;
}

.admin-recent-user:hover {
    border-color: var(--admin-border);

    background: rgba(255, 255, 255, 0.025);

    color: #fff;
}

.admin-user-avatar {
    width: 40px;
    height: 40px;

    flex: 0 0 auto;

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

    border: 1px solid rgba(229, 72, 77, 0.13);
    border-radius: 12px;

    background: var(--admin-red-soft);

    color: var(--admin-red);

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

.admin-recent-user-info {
    min-width: 0;
    flex: 1;

    display: flex;
    flex-direction: column;
}

.admin-recent-user-info strong {
    overflow: hidden;

    color: #e8eaf0;

    font-size: 12px;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-recent-user-info span {
    margin-top: 3px;

    overflow: hidden;

    color: var(--admin-muted);

    font-size: 10px;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-recent-user-meta {
    display: flex;
    align-items: center;
    gap: 6px;
}

.admin-user-arrow {
    margin-left: 7px;

    color: #5d6470;

    font-size: 24px;
}


/* =========================================================
   BADGES
========================================================= */

.admin-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 5px 8px;

    border: 1px solid var(--admin-border);
    border-radius: 7px;

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

    letter-spacing: 0.7px;

    white-space: nowrap;
}

.admin-badge-active {
    border-color: rgba(77, 204, 139, 0.17);

    background: var(--admin-green-soft);

    color: var(--admin-green);
}

.admin-badge-premium {
    border-color: rgba(229, 72, 77, 0.18);

    background: var(--admin-red-soft);

    color: #ff7478;
}

.admin-badge-free {
    background: rgba(255, 255, 255, 0.045);

    color: #8f96a3;
}

.admin-badge-blocked {
    border-color: rgba(229, 72, 77, 0.18);

    background: rgba(229, 72, 77, 0.10);

    color: #ff7378;
}

.admin-badge-admin {
    border-color: rgba(231, 173, 91, 0.18);

    background: rgba(231, 173, 91, 0.09);

    color: var(--admin-yellow);
}


/* =========================================================
   EMPTY STATE
========================================================= */

.admin-empty-state {
    min-height: 180px;

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

    padding: 30px;

    text-align: center;
}

.admin-empty-state strong {
    color: #dfe2e8;

    font-size: 14px;
}

.admin-empty-state span {
    margin-top: 5px;

    color: var(--admin-muted);

    font-size: 11px;
}


/* =========================================================
   USERS TOOLBAR
========================================================= */

.admin-user-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;

    margin-bottom: 20px;
}

.admin-user-search {
    flex: 1;

    display: flex;
    gap: 8px;

    max-width: 620px;
}

.admin-search-box {
    min-width: 0;
    flex: 1;

    height: 45px;

    display: flex;
    align-items: center;
    gap: 10px;

    padding: 0 14px;

    border: 1px solid var(--admin-border);
    border-radius: 12px;

    background: var(--admin-surface);
}

.admin-search-box > span {
    color: #68707c;

    font-size: 18px;
}

.admin-search-box input {
    width: 100%;

    border: 0;
    outline: 0;

    background: transparent;

    color: #fff;

    font-size: 12px;
}

.admin-search-box input::placeholder {
    color: #5e6571;
}

.admin-search-button {
    padding: 0 17px;

    border: 1px solid rgba(229, 72, 77, 0.2);
    border-radius: 12px;

    background: var(--admin-red-soft);

    color: #ff767b;

    font-size: 11px;
    font-weight: 850;

    cursor: pointer;
}

.admin-filter-tabs {
    display: flex;
    align-items: center;

    padding: 4px;

    border: 1px solid var(--admin-border);
    border-radius: 12px;

    background: rgba(255, 255, 255, 0.025);
}

.admin-filter-tabs a {
    padding: 8px 11px;

    border-radius: 8px;

    color: #7f8793;

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

    white-space: nowrap;
}

.admin-filter-tabs a:hover {
    color: #fff;
}

.admin-filter-tabs a.active {
    background: var(--admin-red-soft);

    color: #ff7479;
}


/* =========================================================
   USERS TABLE
========================================================= */

.admin-table-wrapper {
    overflow-x: auto;
}

.admin-table {
    width: 100%;

    border-collapse: collapse;
}

.admin-table th {
    padding: 12px 18px;

    border-bottom: 1px solid var(--admin-border);

    color: #606875;

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

    letter-spacing: 1px;
    text-transform: uppercase;

    text-align: left;
}

.admin-table td {
    padding: 14px 18px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.045);

    color: #cbd0d8;

    font-size: 11px;

    vertical-align: middle;
}

.admin-table tbody tr {
    transition: background 0.2s ease;
}

.admin-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.018);
}

.admin-table tbody tr:last-child td {
    border-bottom: 0;
}

.admin-table-user {
    min-width: 240px;

    display: flex;
    align-items: center;
    gap: 11px;
}

.admin-table-user > div:last-child {
    min-width: 0;

    display: flex;
    flex-direction: column;
}

.admin-table-user strong {
    color: #e7e9ed;

    font-size: 11px;
}

.admin-table-user span {
    margin-top: 2px;

    color: var(--admin-muted);

    font-size: 9px;
}

.admin-table-user small {
    margin-top: 2px;

    color: #555c68;

    font-size: 8px;
}

.admin-table-date {
    color: #89909b !important;

    white-space: nowrap;
}

.admin-manage-button {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    padding: 7px 10px;

    border: 1px solid var(--admin-border);
    border-radius: 9px;

    background: rgba(255, 255, 255, 0.025);

    color: #b8bdc6;

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

    white-space: nowrap;

    transition: 0.2s ease;
}

.admin-manage-button:hover {
    border-color: rgba(229, 72, 77, 0.22);

    background: var(--admin-red-soft);

    color: #fff;
}


/* =========================================================
   ALERTS
========================================================= */

.admin-alert {
    margin-bottom: 18px;
    padding: 13px 16px;

    border: 1px solid;
    border-radius: 12px;

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

.admin-alert-success {
    border-color: rgba(77, 204, 139, 0.18);

    background: var(--admin-green-soft);

    color: #67d99c;
}

.admin-alert-error {
    border-color: rgba(229, 72, 77, 0.2);

    background: var(--admin-red-soft);

    color: #ff7a7e;
}


/* =========================================================
   USER DETAILS HERO
========================================================= */

.admin-user-hero {
    display: flex;
    align-items: center;
    gap: 20px;

    margin-bottom: 22px;
    padding: 27px;

    border: 1px solid rgba(229, 72, 77, 0.13);
    border-radius: 21px;

    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(229, 72, 77, 0.11),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #13151c,
            #0d0f14
        );
}

.admin-user-large-avatar {
    width: 74px;
    height: 74px;

    flex: 0 0 auto;

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

    border: 1px solid rgba(229, 72, 77, 0.22);
    border-radius: 22px;

    background:
        linear-gradient(
            135deg,
            var(--admin-red),
            var(--admin-red-dark)
        );

    color: #fff;

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

    box-shadow:
        0 15px 38px rgba(229, 72, 77, 0.18);
}

.admin-user-hero-info {
    min-width: 0;
}

.admin-user-id {
    display: block;

    margin-bottom: 4px;

    color: var(--admin-red);

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

    letter-spacing: 1.2px;
}

.admin-user-hero-info h2 {
    margin: 0;

    color: #fff;

    font-size: 25px;
    font-weight: 850;
}

.admin-user-hero-info p {
    margin: 4px 0 11px;

    color: var(--admin-muted);

    font-size: 11px;
}

.admin-user-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}


/* =========================================================
   USER DETAIL GRID
========================================================= */

.admin-detail-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    gap: 20px;
}

.admin-info-list {
    padding: 7px 21px 15px;
}

.admin-info-list > div {
    min-height: 58px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.admin-info-list > div:last-child {
    border-bottom: 0;
}

.admin-info-list span {
    color: var(--admin-muted);

    font-size: 10px;
}

.admin-info-list strong {
    max-width: 65%;

    color: #dfe2e7;

    font-size: 10px;
    font-weight: 750;

    text-align: right;

    overflow-wrap: anywhere;
}


/* =========================================================
   PREMIUM PANEL
========================================================= */

.admin-premium-panel {
    border-color: rgba(229, 72, 77, 0.14);
}

.admin-premium-status {
    margin: 20px 20px 14px;
    padding: 17px;

    display: flex;
    flex-direction: column;

    border: 1px solid rgba(229, 72, 77, 0.15);
    border-radius: 13px;

    background:
        linear-gradient(
            135deg,
            rgba(229, 72, 77, 0.10),
            rgba(229, 72, 77, 0.025)
        );
}

.admin-premium-status span {
    color: #9da3ad;

    font-size: 9px;
}

.admin-premium-status strong {
    margin-top: 4px;

    color: #fff;

    font-size: 14px;
}

.admin-premium-inactive {
    border-color: var(--admin-border);

    background: rgba(255, 255, 255, 0.025);
}

.admin-premium-form {
    padding: 4px 20px 12px;

    display: flex;
    flex-direction: column;
    gap: 8px;
}

.admin-premium-form label {
    color: #9299a4;

    font-size: 9px;
    font-weight: 750;
}

.admin-premium-form input {
    width: 100%;
    height: 44px;

    padding: 0 13px;

    border: 1px solid var(--admin-border);
    border-radius: 11px;
    outline: none;

    background: #0a0c11;

    color: #fff;

    font-size: 11px;

    color-scheme: dark;
}

.admin-premium-form input:focus {
    border-color: rgba(229, 72, 77, 0.38);

    box-shadow:
        0 0 0 3px rgba(229, 72, 77, 0.06);
}

.admin-premium-submit {
    min-height: 44px;

    margin-top: 4px;

    border: 0;
    border-radius: 11px;

    background:
        linear-gradient(
            135deg,
            var(--admin-red),
            var(--admin-red-dark)
        );

    color: #fff;

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

    cursor: pointer;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.admin-premium-submit:hover {
    transform: translateY(-1px);

    box-shadow:
        0 10px 28px rgba(229, 72, 77, 0.2);
}

.admin-danger-outline {
    width: calc(100% - 40px);
    min-height: 40px;

    margin: 0 20px 20px;

    border: 1px solid rgba(229, 72, 77, 0.18);
    border-radius: 11px;

    background: transparent;

    color: #d76569;

    font-size: 9px;
    font-weight: 850;

    cursor: pointer;
}

.admin-danger-outline:hover {
    background: rgba(229, 72, 77, 0.07);

    color: #ff7479;
}


/* =========================================================
   ACTIVITY
========================================================= */

.admin-activity-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 14px;

    margin-bottom: 22px;
}

.admin-activity-card {
    display: flex;
    align-items: center;
    gap: 15px;

    padding: 18px 20px;

    border: 1px solid var(--admin-border);
    border-radius: 16px;

    background: var(--admin-surface);
}

.admin-activity-card > span {
    width: 39px;
    height: 39px;

    flex: 0 0 auto;

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

    border-radius: 11px;

    background: var(--admin-red-soft);

    color: var(--admin-red);
}

.admin-activity-card div {
    display: flex;
    flex-direction: column;
}

.admin-activity-card strong {
    color: #fff;

    font-size: 20px;
    line-height: 1;
}

.admin-activity-card small {
    margin-top: 5px;

    color: var(--admin-muted);

    font-size: 9px;
}


/* =========================================================
   ACCOUNT STATUS
========================================================= */

.admin-account-status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;

    padding: 20px 22px;
}

.admin-account-status-row > div {
    display: flex;
    flex-direction: column;
}

.admin-account-status-row strong {
    color: #e0e3e8;

    font-size: 12px;
}

.admin-account-status-row span {
    margin-top: 4px;

    color: var(--admin-muted);

    font-size: 10px;
}

.admin-danger-button,
.admin-success-button {
    min-width: 120px;
    min-height: 40px;

    padding: 0 15px;

    border-radius: 10px;

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

    cursor: pointer;
}

.admin-danger-button {
    border: 1px solid rgba(229, 72, 77, 0.22);

    background: var(--admin-red-soft);

    color: #ff7479;
}

.admin-success-button {
    border: 1px solid rgba(77, 204, 139, 0.2);

    background: var(--admin-green-soft);

    color: var(--admin-green);
}


/* =========================================================
   PREMIUM HISTORY
========================================================= */

.admin-history-list {
    padding: 6px 21px 16px;
}

.admin-history-item {
    position: relative;

    min-height: 72px;

    display: flex;
    align-items: center;
    gap: 13px;

    padding: 12px 0;

    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.admin-history-item:last-child {
    border-bottom: 0;
}

.admin-history-dot {
    width: 9px;
    height: 9px;

    flex: 0 0 auto;

    border-radius: 50%;

    background: var(--admin-red);

    box-shadow:
        0 0 0 4px rgba(229, 72, 77, 0.08);
}

.admin-history-content {
    min-width: 0;
    flex: 1;

    display: flex;
    flex-direction: column;
}

.admin-history-content strong {
    color: #dfe2e7;

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

    letter-spacing: 0.5px;
}

.admin-history-content span {
    margin-top: 3px;

    color: #8e95a0;

    font-size: 9px;
}

.admin-history-content small {
    margin-top: 3px;

    color: #5e6570;

    font-size: 8px;
}

.admin-history-item time {
    color: #656d78;

    font-size: 8px;

    white-space: nowrap;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1200px) {

    .admin-stats-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

}


@media (max-width: 1000px) {

    .admin-sidebar {
        width: min(310px, 88vw);

        transform: translateX(-102%);

        transition:
            transform 0.25s ease;
    }

    .admin-sidebar.open {
        transform: translateX(0);
    }

    .admin-sidebar-close {
        display: flex;
    }

    .admin-main {
        margin-left: 0;
    }

    .admin-menu-button {
        display: flex;
    }

    body.admin-sidebar-open {
        overflow: hidden;
    }

    .admin-user-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-user-search {
        max-width: none;
    }

    .admin-filter-tabs {
        width: fit-content;
        max-width: 100%;

        overflow-x: auto;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 760px) {

    .admin-topbar {
        min-height: 72px;

        padding: 12px 16px;
    }

    .admin-topbar h1 {
        font-size: 18px;
    }

    .admin-page-eyebrow {
        font-size: 8px;
    }

    .admin-view-site {
        display: none;
    }

    .admin-content {
        width: calc(100% - 28px);

        padding: 20px 0 50px;
    }

    .admin-welcome {
        align-items: flex-start;
        flex-direction: column;

        padding: 23px 20px;
    }

    .admin-welcome h2 {
        font-size: 24px;
    }

    .admin-primary-button {
        width: 100%;
    }

    .admin-stats-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .admin-stat-card {
        min-height: 155px;

        padding: 15px;
    }

    .admin-stat-card > strong {
        font-size: 27px;
    }

    .admin-panel {
        border-radius: 16px;
    }

    .admin-panel-header {
        min-height: 68px;

        padding: 15px 17px;
    }

    .admin-panel-header h2 {
        font-size: 15px;
    }

    .admin-panel-action {
        font-size: 9px;
    }

    .admin-recent-user {
        padding: 10px;
    }

    .admin-recent-user-meta {
        display: none;
    }

    .admin-user-toolbar {
        margin-bottom: 15px;
    }

    .admin-user-search {
        flex-direction: column;
    }

    .admin-search-button {
        height: 42px;
    }

    .admin-filter-tabs {
        width: 100%;
    }

    .admin-filter-tabs a {
        flex: 1;

        text-align: center;
    }

    .admin-detail-grid {
        grid-template-columns: 1fr;
    }

    .admin-user-hero {
        padding: 20px;
    }

    .admin-user-large-avatar {
        width: 61px;
        height: 61px;

        border-radius: 18px;

        font-size: 23px;
    }

    .admin-user-hero-info h2 {
        font-size: 20px;
    }

    .admin-activity-grid {
        grid-template-columns: 1fr;
    }

    .admin-account-status-row {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-account-status-row form,
    .admin-danger-button,
    .admin-success-button {
        width: 100%;
    }

    .admin-history-item {
        align-items: flex-start;
    }

    .admin-history-item time {
        display: none;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 470px) {

    .admin-stats-grid {
        grid-template-columns: 1fr 1fr;

        gap: 10px;
    }

    .admin-stat-card {
        min-height: 145px;
    }

    .admin-stat-top {
        margin-bottom: 15px;
    }

    .admin-stat-tag {
        display: none;
    }

    .admin-user-hero {
        align-items: flex-start;
    }

    .admin-user-large-avatar {
        width: 54px;
        height: 54px;

        border-radius: 16px;
    }

    .admin-info-list {
        padding-left: 16px;
        padding-right: 16px;
    }

    .admin-info-list > div {
        align-items: flex-start;
        flex-direction: column;
        justify-content: center;

        gap: 4px;

        padding: 10px 0;
    }

    .admin-info-list strong {
        max-width: 100%;

        text-align: left;
    }

}
/* =========================================================
   SHORTDRAMA PREMIUM LOCK
========================================================= */

.sd-premium-lock-page {
    min-height: 100vh;
    margin: 0;

    overflow-x: hidden;

    background: #07080c;
    color: #fff;
}


/* BACKGROUND */

.sd-premium-lock-background {
    position: fixed;
    inset: 0;

    overflow: hidden;

    z-index: 0;
}

.sd-premium-lock-background-image {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center 20%;

    filter: blur(18px);

    opacity: 0.18;

    transform: scale(1.08);
}

.sd-premium-lock-background-overlay {
    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            circle at 65% 35%,
            rgba(229, 72, 77, 0.12),
            transparent 32%
        ),
        linear-gradient(
            180deg,
            rgba(7, 8, 12, 0.76),
            #07080c 82%
        );
}


/* HEADER */

.sd-premium-lock-header {
    position: relative;

    z-index: 10;

    width: min(1400px, calc(100% - 64px));

    min-height: 78px;

    margin: 0 auto;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.sd-premium-lock-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    color: #fff;

    font-size: 16px;
    font-weight: 850;

    text-decoration: none;
}

.sd-premium-lock-brand:hover {
    color: #fff;
}

.sd-premium-lock-brand-icon {
    width: 37px;
    height: 37px;

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

    border-radius: 11px;

    background:
        linear-gradient(
            135deg,
            #e5484d,
            #a72231
        );

    font-size: 13px;

    box-shadow:
        0 10px 28px rgba(229, 72, 77, 0.22);
}

.sd-premium-lock-back {
    padding: 9px 13px;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;

    background: rgba(255, 255, 255, 0.035);

    color: #a7adb8;

    font-size: 11px;
    font-weight: 700;

    text-decoration: none;

    transition: 0.2s ease;
}

.sd-premium-lock-back:hover {
    border-color: rgba(229, 72, 77, 0.25);

    background: rgba(229, 72, 77, 0.08);

    color: #fff;
}


/* MAIN */

.sd-premium-lock-main {
    position: relative;

    z-index: 5;

    min-height: calc(100vh - 78px);

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

    padding: 30px 32px 70px;
}


/* CARD */

.sd-premium-lock-card {
    width: min(100%, 1040px);

    display: grid;

    grid-template-columns:
        minmax(220px, 320px)
        minmax(0, 1fr);

    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 28px;

    background:
        linear-gradient(
            145deg,
            rgba(18, 20, 27, 0.97),
            rgba(9, 10, 15, 0.98)
        );

    box-shadow:
        0 35px 100px rgba(0, 0, 0, 0.45);
}


/* POSTER */

.sd-premium-lock-poster {
    position: relative;

    min-height: 580px;

    overflow: hidden;

    background: #101218;
}

.sd-premium-lock-poster img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.sd-premium-lock-poster-shade {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            transparent 50%,
            rgba(8, 9, 13, 0.9)
        );
}

.sd-premium-lock-poster-badge {
    position: absolute;
    top: 18px;
    left: 18px;

    padding: 7px 10px;

    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;

    background:
        linear-gradient(
            135deg,
            #e5484d,
            #a72231
        );

    color: #fff;

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

    letter-spacing: 1.2px;

    box-shadow:
        0 8px 24px rgba(229, 72, 77, 0.25);
}


/* CONTENT */

.sd-premium-lock-content {
    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 48px;
}

.sd-premium-lock-icon {
    width: 48px;
    height: 48px;

    margin-bottom: 20px;

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

    border: 1px solid rgba(229, 72, 77, 0.18);
    border-radius: 15px;

    background: rgba(229, 72, 77, 0.10);

    color: #e5484d;

    font-size: 18px;
}

.sd-premium-lock-eyebrow {
    margin-bottom: 9px;

    color: #e5484d;

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

    letter-spacing: 1.8px;
}

.sd-premium-lock-content h1 {
    max-width: 570px;

    margin: 0;

    color: #fff;

    font-size: clamp(30px, 4vw, 47px);
    font-weight: 900;

    line-height: 1.04;
    letter-spacing: -1.6px;
}

.sd-premium-lock-series {
    margin: 12px 0 0;

    color: #a6acb7;

    font-size: 12px;
}

.sd-premium-lock-series strong {
    color: #d9dce2;
}


/* EPISODE INFORMATION */

.sd-premium-lock-episode {
    display: flex;
    align-items: center;

    margin-top: 27px;
    padding: 15px 17px;

    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 14px;

    background: rgba(255, 255, 255, 0.025);
}

.sd-premium-lock-episode > div {
    flex: 1;

    display: flex;
    flex-direction: column;
}

.sd-premium-lock-episode span {
    color: #727985;

    font-size: 8px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: 0.7px;
}

.sd-premium-lock-episode strong {
    margin-top: 4px;

    color: #e7e9ed;

    font-size: 11px;
}

.sd-premium-lock-divider {
    width: 1px !important;
    height: 30px;

    flex: 0 0 1px !important;

    margin: 0 16px;

    background: rgba(255, 255, 255, 0.08);
}


/* DESCRIPTION */

.sd-premium-lock-description {
    max-width: 560px;

    margin: 22px 0 0;

    color: #8f96a3;

    font-size: 12px;
    line-height: 1.7;
}


/* ACTIONS */

.sd-premium-lock-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;

    margin-top: 23px;
}

.sd-premium-lock-primary,
.sd-premium-lock-secondary {
    min-height: 44px;

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

    padding: 0 17px;

    border-radius: 11px;

    font-size: 10px;
    font-weight: 850;

    text-decoration: none;

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

.sd-premium-lock-primary {
    border: 1px solid transparent;

    background:
        linear-gradient(
            135deg,
            #e5484d,
            #a72231
        );

    color: #fff;

    box-shadow:
        0 10px 30px rgba(229, 72, 77, 0.18);
}

.sd-premium-lock-primary:hover {
    color: #fff;

    transform: translateY(-2px);
}

.sd-premium-lock-secondary {
    border: 1px solid rgba(255, 255, 255, 0.09);

    background: rgba(255, 255, 255, 0.035);

    color: #b7bdc7;
}

.sd-premium-lock-secondary:hover {
    border-color: rgba(255, 255, 255, 0.15);

    background: rgba(255, 255, 255, 0.06);

    color: #fff;
}


/* BENEFITS */

.sd-premium-lock-benefits {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 9px;

    margin-top: 28px;
}

.sd-premium-lock-benefits > div {
    display: flex;
    align-items: flex-start;
    gap: 8px;

    padding: 11px;

    border: 1px solid rgba(255, 255, 255, 0.055);
    border-radius: 11px;

    background: rgba(255, 255, 255, 0.018);
}

.sd-premium-lock-benefits > div > span {
    color: #e5484d;

    font-size: 10px;
    font-weight: 900;
}

.sd-premium-lock-benefits p {
    margin: 0;

    display: flex;
    flex-direction: column;
}

.sd-premium-lock-benefits strong {
    color: #cdd1d8;

    font-size: 9px;
}

.sd-premium-lock-benefits small {
    margin-top: 3px;

    color: #646b77;

    font-size: 8px;
}


/* LOGIN NOTE */

.sd-premium-lock-login-note {
    margin: 18px 0 0;

    color: #666e7a;

    font-size: 9px;
}

.sd-premium-lock-login-note a {
    margin-left: 3px;

    color: #e5484d;

    font-weight: 800;

    text-decoration: none;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 850px) {

    .sd-premium-lock-card {
        grid-template-columns:
            minmax(180px, 240px)
            minmax(0, 1fr);
    }

    .sd-premium-lock-content {
        padding: 35px;
    }

    .sd-premium-lock-poster {
        min-height: 540px;
    }

    .sd-premium-lock-benefits {
        grid-template-columns: 1fr;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 650px) {

    .sd-premium-lock-header {
        width: calc(100% - 28px);

        min-height: 65px;
    }

    .sd-premium-lock-brand {
        font-size: 14px;
    }

    .sd-premium-lock-brand-icon {
        width: 34px;
        height: 34px;
    }

    .sd-premium-lock-back {
        padding: 8px 10px;

        font-size: 9px;
    }

    .sd-premium-lock-main {
        min-height: calc(100vh - 65px);

        padding: 18px 14px 40px;
    }

    .sd-premium-lock-card {
        display: block;

        border-radius: 21px;
    }

    .sd-premium-lock-poster {
        height: 260px;
        min-height: 0;
    }

    .sd-premium-lock-poster img {
        object-position: center 22%;
    }

    .sd-premium-lock-poster-shade {
        background:
            linear-gradient(
                180deg,
                transparent 25%,
                rgba(12, 14, 19, 0.2) 55%,
                #0d0f14 100%
            );
    }

    .sd-premium-lock-content {
        margin-top: -22px;

        position: relative;

        padding: 20px 19px 25px;
    }

    .sd-premium-lock-icon {
        width: 43px;
        height: 43px;

        margin-bottom: 17px;
    }

    .sd-premium-lock-content h1 {
        font-size: clamp(27px, 9vw, 38px);

        letter-spacing: -1px;
    }

    .sd-premium-lock-episode {
        align-items: stretch;
        flex-direction: column;

        gap: 10px;
    }

    .sd-premium-lock-episode > div {
        flex-direction: row;
        justify-content: space-between;
        gap: 10px;
    }

    .sd-premium-lock-episode strong {
        margin-top: 0;
    }

    .sd-premium-lock-divider {
        width: 100% !important;
        height: 1px;

        flex: 0 0 1px !important;

        margin: 0;
    }

    .sd-premium-lock-actions {
        flex-direction: column;
    }

    .sd-premium-lock-primary,
    .sd-premium-lock-secondary {
        width: 100%;
    }

}

/* =========================================================
   EPISODE FREE / PREMIUM ACCESS
========================================================= */

.episodes-free-preview-text {
    display: block;
    margin-top: 6px;

    color: #7f8792;

    font-size: 11px;
}

.episodes-free-preview-text strong {
    color: #e5484d;
}


/* CARD */

.episode-card {
    position: relative;
}

.episode-card-content {
    min-width: 0;
    flex: 1;
}

.episode-card-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}


/* BADGES */

.episode-access-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 4px 7px;

    border-radius: 6px;

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

    letter-spacing: 0.8px;

    direction: ltr;
}


/* FREE */

.episode-access-free {
    border: 1px solid rgba(70, 211, 139, 0.17);

    background: rgba(70, 211, 139, 0.08);

    color: #54d99a;
}


/* PREMIUM */

.episode-card-locked {
    border-color: rgba(229, 72, 77, 0.10);
}

.episode-card-locked:hover {
    border-color: rgba(229, 72, 77, 0.25);

    background:
        linear-gradient(
            135deg,
            rgba(229, 72, 77, 0.06),
            rgba(255, 255, 255, 0.02)
        );
}

.episode-access-premium {
    border: 1px solid rgba(229, 72, 77, 0.17);

    background: rgba(229, 72, 77, 0.08);

    color: #ff6d72;
}


/* LOCK ICON */

.episode-card-locked .play-icon {
    border: 1px solid rgba(229, 72, 77, 0.14);

    background: rgba(229, 72, 77, 0.08);

    color: #e5484d;

    font-size: 14px;
}

.episode-card-free .play-icon {
    box-shadow:
        0 7px 22px rgba(229, 72, 77, 0.16);
}


/* MOBILE */

@media (max-width: 600px) {

    .episode-card-title-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }

    .episode-access-badge {
        font-size: 6px;
    }

}
/* =========================================================
   SHORTDRAMA WATCH V2
========================================================= */

.watch-page-v2 {
    --watch-red: #e5484d;
    --watch-red-dark: #a72231;
    --watch-red-soft: rgba(229, 72, 77, 0.10);

    --watch-green: #43d08d;
    --watch-green-soft: rgba(67, 208, 141, 0.09);

    --watch-bg: #07080b;
    --watch-surface: #101217;
    --watch-surface-2: #14171d;
    --watch-border: rgba(255, 255, 255, 0.075);
    --watch-muted: #858c98;

    min-height: 100vh;

    margin: 0;

    background:
        radial-gradient(
            circle at 50% -10%,
            rgba(229, 72, 77, 0.055),
            transparent 30%
        ),
        var(--watch-bg);

    color: #fff;
}


/* =========================================================
   HEADER
========================================================= */

.watch-v2-header {
    width: min(1450px, calc(100% - 48px));

    min-height: 74px;

    margin: 0 auto;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.watch-v2-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    color: #fff;

    font-size: 15px;
    font-weight: 850;

    text-decoration: none;
}

.watch-v2-brand:hover {
    color: #fff;
}

.watch-v2-brand-icon {
    width: 36px;
    height: 36px;

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

    border-radius: 11px;

    background:
        linear-gradient(
            135deg,
            var(--watch-red),
            var(--watch-red-dark)
        );

    font-size: 12px;

    box-shadow:
        0 8px 25px rgba(229, 72, 77, 0.20);
}

.watch-v2-back {
    padding: 9px 13px;

    border: 1px solid var(--watch-border);
    border-radius: 10px;

    background: rgba(255, 255, 255, 0.025);

    color: #969da8;

    font-size: 10px;
    font-weight: 750;

    text-decoration: none;

    transition: 0.2s ease;
}

.watch-v2-back:hover {
    border-color: rgba(229, 72, 77, 0.22);

    background: var(--watch-red-soft);

    color: #fff;
}


/* =========================================================
   CONTAINER
========================================================= */

.watch-v2-container {
    width: min(1450px, calc(100% - 48px));

    margin: 0 auto;

    padding-bottom: 80px;
}


/* =========================================================
   PLAYER
========================================================= */

.watch-v2-player-section {
    position: relative;
}

.watch-v2-player-shell {
    position: relative;

    overflow: hidden;

    width: 100%;

    border: 1px solid rgba(255, 255, 255, 0.055);
    border-radius: 22px;

    background: #000;

    box-shadow:
        0 25px 70px rgba(0, 0, 0, 0.36);
}

.watch-v2-player-shell video {
    display: block;

    width: 100%;
    height: min(76vh, 810px);

    background: #000;

    object-fit: contain;
}


/* =========================================================
   META
========================================================= */

.watch-v2-meta {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    align-items: center;
    gap: 40px;

    padding: 28px 5px 30px;

    border-bottom: 1px solid var(--watch-border);
}

.watch-v2-labels {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;

    margin-bottom: 10px;
}

.watch-v2-platform {
    color: var(--watch-red);

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

    letter-spacing: 1.3px;
}

.watch-v2-access {
    display: inline-flex;
    align-items: center;

    padding: 4px 7px;

    border-radius: 6px;

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

    letter-spacing: 0.8px;
}

.watch-v2-access-free {
    border: 1px solid rgba(67, 208, 141, 0.14);

    background: var(--watch-green-soft);

    color: var(--watch-green);
}

.watch-v2-access-premium {
    border: 1px solid rgba(229, 72, 77, 0.16);

    background: var(--watch-red-soft);

    color: #ff7479;
}

.watch-v2-meta h1 {
    max-width: 800px;

    margin: 0;

    color: #fff;

    font-size: clamp(22px, 3vw, 34px);
    font-weight: 850;

    line-height: 1.2;

    letter-spacing: -0.7px;
}

.watch-v2-episode-meta {
    display: flex;
    align-items: center;
    gap: 6px;

    margin-top: 8px;

    color: #727986;

    font-size: 11px;
}

.watch-v2-episode-meta strong {
    color: #b9bec7;

    font-weight: 750;
}

.watch-v2-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;

    margin-top: 12px;
}

.watch-v2-tags span {
    padding: 5px 8px;

    border: 1px solid var(--watch-border);
    border-radius: 7px;

    background: rgba(255, 255, 255, 0.025);

    color: #8e95a0;

    font-size: 8px;
    font-weight: 750;
}


/* =========================================================
   PREVIOUS / NEXT
========================================================= */

.watch-v2-navigation {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(150px, 190px));

    gap: 9px;
}

.watch-v2-nav-button {
    min-height: 62px;

    display: flex;
    align-items: center;
    gap: 12px;

    padding: 10px 14px;

    border: 1px solid var(--watch-border);
    border-radius: 13px;

    background: var(--watch-surface);

    color: #fff;

    text-decoration: none;

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

.watch-v2-nav-button:hover {
    border-color: rgba(229, 72, 77, 0.22);

    background: #15171d;

    color: #fff;

    transform: translateY(-1px);
}

.watch-v2-nav-button > span {
    color: #8b929d;

    font-size: 18px;
}

.watch-v2-nav-button > div {
    display: flex;
    flex-direction: column;
}

.watch-v2-nav-button small {
    color: #666d78;

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

    letter-spacing: 0.6px;
    text-transform: uppercase;
}

.watch-v2-nav-button strong {
    margin-top: 3px;

    color: #d8dbe1;

    font-size: 10px;
}

.watch-v2-nav-next {
    justify-content: flex-end;

    border-color: rgba(229, 72, 77, 0.13);

    background:
        linear-gradient(
            135deg,
            rgba(229, 72, 77, 0.08),
            rgba(255, 255, 255, 0.02)
        );

    text-align: right;
}

.watch-v2-nav-next > span {
    color: var(--watch-red);
}

.watch-v2-nav-button.disabled {
    opacity: 0.3;

    pointer-events: none;
}


/* =========================================================
   EPISODES
========================================================= */

.watch-v2-episodes {
    padding-top: 34px;
}

.watch-v2-episodes-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;

    margin-bottom: 18px;
}

.watch-v2-section-label {
    display: block;

    margin-bottom: 4px;

    color: var(--watch-red);

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

    letter-spacing: 1.5px;
}

.watch-v2-episodes-header h2 {
    margin: 0;

    color: #fff;

    font-size: 24px;
    font-weight: 850;

    letter-spacing: -0.5px;
}

.watch-v2-episodes-header p {
    margin: 5px 0 0;

    color: #6e7580;

    font-size: 10px;
}

.watch-v2-episode-count {
    padding: 7px 10px;

    border: 1px solid var(--watch-border);
    border-radius: 8px;

    background: rgba(255, 255, 255, 0.02);

    color: #7d8490;

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


/* =========================================================
   EPISODE GRID
========================================================= */

.watch-v2-episode-list {
    display: grid;

    grid-template-columns:
        repeat(5, minmax(0, 1fr));

    gap: 9px;
}

.watch-v2-episode-card {
    position: relative;

    min-height: 76px;

    display: flex;
    align-items: center;
    gap: 11px;

    padding: 11px;

    overflow: hidden;

    border: 1px solid var(--watch-border);
    border-radius: 13px;

    background:
        linear-gradient(
            145deg,
            #111318,
            #0e1014
        );

    color: #fff;

    text-decoration: none;

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

.watch-v2-episode-card:hover {
    border-color: rgba(229, 72, 77, 0.22);

    background: #15171c;

    color: #fff;

    transform: translateY(-2px);
}

.watch-v2-episode-number {
    width: 39px;
    height: 39px;

    flex: 0 0 auto;

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

    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 10px;

    background: rgba(255, 255, 255, 0.025);

    color: #8d949f;

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

.watch-v2-episode-info {
    min-width: 0;
    flex: 1;

    display: flex;
    flex-direction: column;
}

.watch-v2-episode-info strong {
    overflow: hidden;

    color: #cfd3da;

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

    white-space: nowrap;
    text-overflow: ellipsis;
}

.watch-v2-episode-info small {
    margin-top: 3px;

    color: #606773;

    font-size: 7px;
    font-weight: 850;

    letter-spacing: 0.6px;
}

.watch-v2-episode-card.free
.watch-v2-episode-info small {
    color: var(--watch-green);
}

.watch-v2-episode-card.locked
.watch-v2-episode-info small {
    color: #b8595e;
}

.watch-v2-episode-action {
    width: 28px;
    height: 28px;

    flex: 0 0 auto;

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

    border-radius: 9px;

    background: rgba(255, 255, 255, 0.035);

    color: #858c97;

    font-size: 9px;
}


/* FREE */

.watch-v2-episode-card.free:not(.current)
.watch-v2-episode-action {
    background: var(--watch-green-soft);

    color: var(--watch-green);
}


/* LOCKED */

.watch-v2-episode-card.locked {
    opacity: 0.72;
}

.watch-v2-episode-card.locked
.watch-v2-episode-action {
    border: 1px solid rgba(229, 72, 77, 0.10);

    background: var(--watch-red-soft);

    color: #e86b70;
}


/* CURRENT */

.watch-v2-episode-card.current {
    border-color: rgba(229, 72, 77, 0.42);

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(229, 72, 77, 0.13),
            transparent 55%
        ),
        #14151a;

    box-shadow:
        inset 3px 0 0 var(--watch-red);
}

.watch-v2-episode-card.current
.watch-v2-episode-number {
    border-color: rgba(229, 72, 77, 0.25);

    background: var(--watch-red);

    color: #fff;
}

.watch-v2-current-label {
    color: var(--watch-red) !important;
}

.watch-v2-episode-card.current
.watch-v2-episode-action {
    background: var(--watch-red-soft);

    color: var(--watch-red);
}


/* =========================================================
   PREMIUM NOTE
========================================================= */

.watch-v2-premium-note {
    margin-top: 18px;
    padding: 15px 17px;

    display: flex;
    align-items: center;
    gap: 13px;

    border: 1px solid rgba(229, 72, 77, 0.12);
    border-radius: 14px;

    background:
        linear-gradient(
            90deg,
            rgba(229, 72, 77, 0.07),
            rgba(229, 72, 77, 0.015)
        );
}

.watch-v2-premium-note-icon {
    width: 35px;
    height: 35px;

    flex: 0 0 auto;

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

    border-radius: 10px;

    background: var(--watch-red-soft);

    color: var(--watch-red);
}

.watch-v2-premium-note > div {
    display: flex;
    flex-direction: column;
}

.watch-v2-premium-note strong {
    color: #d5d9df;

    font-size: 10px;
}

.watch-v2-premium-note p {
    margin: 3px 0 0;

    color: #676e79;

    font-size: 8px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    .watch-v2-episode-list {
        grid-template-columns:
            repeat(4, minmax(0, 1fr));
    }

    .watch-v2-meta {
        align-items: stretch;
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .watch-v2-navigation {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .watch-v2-header {
        width: calc(100% - 28px);

        min-height: 64px;
    }

    .watch-v2-container {
        width: 100%;

        padding-bottom: 50px;
    }

    .watch-v2-player-shell {
        border-left: 0;
        border-right: 0;
        border-radius: 0;
    }

    .watch-v2-player-shell video {
        height: auto;
        min-height: 280px;
        max-height: 68vh;
    }

    .watch-v2-meta {
        margin: 0 15px;

        padding: 20px 0 24px;
    }

    .watch-v2-meta h1 {
        font-size: 22px;
    }

    .watch-v2-navigation {
        gap: 7px;
    }

    .watch-v2-nav-button {
        min-height: 57px;

        padding: 9px 11px;
    }

    .watch-v2-nav-button strong {
        font-size: 9px;
    }

    .watch-v2-episodes {
        padding: 26px 15px 0;
    }

    .watch-v2-episodes-header {
        align-items: center;
    }

    .watch-v2-episodes-header h2 {
        font-size: 21px;
    }


    /*
     * Mobile = horizontal episode rail.
     * Much cleaner than a huge grid.
     */

    .watch-v2-episode-list {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: 155px;

        gap: 8px;

        overflow-x: auto;

        padding: 2px 2px 12px;

        scroll-snap-type: x proximity;

        scrollbar-width: none;
    }

    .watch-v2-episode-list::-webkit-scrollbar {
        display: none;
    }

    .watch-v2-episode-card {
        scroll-snap-align: start;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 430px) {

    .watch-v2-brand {
        font-size: 13px;
    }

    .watch-v2-back {
        font-size: 8px;
    }

    .watch-v2-player-shell video {
        min-height: 240px;
    }

    .watch-v2-navigation {
        grid-template-columns: 1fr 1fr;
    }

    .watch-v2-nav-button > span {
        font-size: 15px;
    }

    .watch-v2-episode-count {
        display: none;
    }

}
/* =========================================================
   DRAMA - MY LIST BUTTON
========================================================= */

.drama-my-list {
    margin: 22px 0;
}

.drama-my-list form {
    margin: 0;
}

.drama-list-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    min-height: 44px;

    padding: 10px 18px;

    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;

    background: rgba(255, 255, 255, 0.055);

    color: #fff;

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

    text-decoration: none;

    cursor: pointer;

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

.drama-list-button:hover {
    transform: translateY(-2px);

    background: rgba(255, 255, 255, 0.09);

    border-color: rgba(255, 255, 255, 0.22);

    color: #fff;
}

.drama-list-button span {
    font-size: 19px;
    line-height: 1;
}

.drama-list-button-active {
    background: rgba(229, 72, 77, 0.12);

    border-color: rgba(229, 72, 77, 0.28);

    color: #ff7479;
}


/* =========================================================
   MY LIST PAGE
========================================================= */

.my-list-page {
    min-height: 100vh;
}

.my-list-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;

    margin-bottom: 35px;
}

.my-list-eyebrow {
    display: block;

    margin-bottom: 8px;

    color: #e5484d;

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

    letter-spacing: 0.16em;
}

.my-list-header h1 {
    margin: 0;

    font-size: clamp(32px, 5vw, 52px);
    font-weight: 800;
}

.my-list-header p {
    margin: 9px 0 0;

    color: rgba(255, 255, 255, 0.55);
}

.my-list-count {
    flex-shrink: 0;

    padding: 8px 13px;

    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 999px;

    background: rgba(255, 255, 255, 0.04);

    color: rgba(255, 255, 255, 0.62);

    font-size: 12px;
    font-weight: 700;
}


/* GRID */

.my-list-grid {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fill,
            minmax(170px, 1fr)
        );

    gap: 24px 18px;
}


/* CARD */

.my-list-card {
    min-width: 0;
}

.my-list-poster {
    position: relative;

    display: block;

    overflow: hidden;

    aspect-ratio: 2 / 3;

    border-radius: 16px;

    background: rgba(255, 255, 255, 0.04);

    text-decoration: none;
}

.my-list-poster img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform 0.35s ease,
        filter 0.35s ease;
}

.my-list-card:hover
.my-list-poster img {
    transform: scale(1.045);

    filter: brightness(0.72);
}


/* PLAY */

.my-list-play {
    position: absolute;

    top: 50%;
    left: 50%;

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

    width: 48px;
    height: 48px;

    border-radius: 50%;

    background: rgba(229, 72, 77, 0.94);

    color: #fff;

    transform:
        translate(-50%, -42%)
        scale(0.85);

    opacity: 0;

    transition:
        opacity 0.25s ease,
        transform 0.25s ease;
}

.my-list-card:hover
.my-list-play {
    opacity: 1;

    transform:
        translate(-50%, -50%)
        scale(1);
}


/* NO COVER */

.my-list-no-cover {
    width: 100%;
    height: 100%;

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

    font-size: 42px;

    background:
        linear-gradient(
            145deg,
            rgba(229, 72, 77, 0.12),
            rgba(255, 255, 255, 0.03)
        );
}


/* INFO */

.my-list-card-body {
    padding: 12px 3px 0;
}

.my-list-platform {
    margin-bottom: 4px;

    color: #e5484d;

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

    text-transform: uppercase;

    letter-spacing: 0.08em;
}

.my-list-card h2 {
    margin: 0 0 9px;

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

    line-height: 1.35;
}

.my-list-card h2 a {
    color: #fff;

    text-decoration: none;
}

.my-list-remove {
    padding: 0;

    border: 0;

    background: transparent;

    color: rgba(255, 255, 255, 0.42);

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

    cursor: pointer;

    transition: color 0.2s ease;
}

.my-list-remove:hover {
    color: #ff7479;
}


/* EMPTY */

.my-list-empty {
    max-width: 540px;

    margin: 70px auto;

    padding: 45px 30px;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 22px;

    background: rgba(255, 255, 255, 0.025);

    text-align: center;
}

.my-list-empty-icon {
    margin-bottom: 16px;

    color: #e5484d;

    font-size: 54px;
}

.my-list-empty h2 {
    margin-bottom: 9px;

    color: #fff;

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

.my-list-empty p {
    margin: 0 auto 24px;

    color: rgba(255, 255, 255, 0.5);

    line-height: 1.7;
}

.my-list-discover-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 11px 20px;

    border-radius: 11px;

    background: #e5484d;

    color: #fff;

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

    text-decoration: none;
}

.my-list-discover-btn:hover {
    color: #fff;

    filter: brightness(1.08);
}


/* MOBILE */

@media (max-width: 767px) {

    .my-list-header {
        align-items: flex-start;
        flex-direction: column;

        gap: 15px;
    }

    .my-list-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap: 20px 12px;
    }

    .my-list-header h1 {
        font-size: 34px;
    }

}
/* =========================================================
   WATCH HISTORY
========================================================= */

.watch-history-page {
    min-height: 100vh;
    background:
        radial-gradient(
            circle at 50% -10%,
            rgba(229, 72, 77, 0.08),
            transparent 34%
        ),
        #08090c;
    color: #fff;
}


.wh-page {
    min-height: 100vh;
    padding:
        118px
        24px
        80px;
}


.wh-container {
    width: min(1380px, 100%);
    margin: 0 auto;
}


/* =========================================================
   HEADER
========================================================= */

.wh-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;

    margin-bottom: 24px;
}


.wh-heading {
    min-width: 0;
}


.wh-eyebrow {
    display: block;

    margin-bottom: 8px;

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

    letter-spacing: 0.18em;

    color: #e5484d;
}


.wh-heading h1 {
    margin: 0;

    font-size: clamp(
        30px,
        4vw,
        48px
    );

    line-height: 1.05;

    letter-spacing: -0.04em;
}


.wh-heading p {
    margin:
        10px
        0
        0;

    color: rgba(
        255,
        255,
        255,
        0.55
    );

    font-size: 14px;
}


/* =========================================================
   CLEAR
========================================================= */

.wh-clear-form {
    flex: 0 0 auto;
}


.wh-clear-button {
    min-height: 42px;

    padding:
        0
        17px;

    border: 1px solid rgba(
        255,
        255,
        255,
        0.10
    );

    border-radius: 12px;

    background: rgba(
        255,
        255,
        255,
        0.035
    );

    color: rgba(
        255,
        255,
        255,
        0.70
    );

    font: inherit;

    font-size: 13px;
    font-weight: 700;

    cursor: pointer;

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


.wh-clear-button:hover {
    color: #fff;

    border-color: rgba(
        229,
        72,
        77,
        0.35
    );

    background: rgba(
        229,
        72,
        77,
        0.10
    );

    transform: translateY(-1px);
}


/* =========================================================
   COUNT
========================================================= */

.wh-count {
    display: inline-flex;
    align-items: center;
    gap: 5px;

    margin-bottom: 22px;

    color: rgba(
        255,
        255,
        255,
        0.42
    );

    font-size: 12px;
}


.wh-count strong {
    color: rgba(
        255,
        255,
        255,
        0.75
    );
}


/* =========================================================
   GRID
========================================================= */

.wh-grid {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fill,
            minmax(190px, 1fr)
        );

    gap: 26px 18px;
}


/* =========================================================
   CARD
========================================================= */

.wh-card {
    min-width: 0;
}


.wh-poster {
    position: relative;

    display: block;

    overflow: hidden;

    aspect-ratio: 2 / 3;

    border-radius: 15px;

    background: #111318;

    text-decoration: none;

    box-shadow:
        0 15px 40px
        rgba(0, 0, 0, 0.20);
}


.wh-poster img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform 0.35s ease,
        filter 0.35s ease;
}


.wh-card:hover .wh-poster img {
    transform: scale(1.045);

    filter: brightness(0.72);
}


.wh-poster-fallback {
    width: 100%;
    height: 100%;

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

    background:
        linear-gradient(
            145deg,
            #17191f,
            #0c0d11
        );

    color: rgba(
        255,
        255,
        255,
        0.16
    );

    font-size: 36px;
}


.wh-poster-overlay {
    position: absolute;
    inset: 0;

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

    opacity: 0;

    background: rgba(
        0,
        0,
        0,
        0.18
    );

    transition:
        opacity 0.25s ease;
}


.wh-card:hover .wh-poster-overlay {
    opacity: 1;
}


.wh-play {
    width: 48px;
    height: 48px;

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

    padding-left: 3px;

    border-radius: 50%;

    background: #e5484d;

    color: #fff;

    font-size: 17px;

    box-shadow:
        0 10px 35px
        rgba(229, 72, 77, 0.35);

    transform: scale(0.85);

    transition:
        transform 0.25s ease;
}


.wh-card:hover .wh-play {
    transform: scale(1);
}


/* =========================================================
   EPISODE BADGE
========================================================= */

.wh-episode-badge {
    position: absolute;

    left: 10px;
    bottom: 10px;

    padding:
        6px
        9px;

    border: 1px solid rgba(
        255,
        255,
        255,
        0.12
    );

    border-radius: 8px;

    background: rgba(
        7,
        8,
        11,
        0.82
    );

    backdrop-filter: blur(8px);

    color: #fff;

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


/* =========================================================
   CARD BODY
========================================================= */

.wh-card-body {
    padding:
        12px
        3px
        0;
}


.wh-platform {
    margin-bottom: 6px;

    color: #e5484d;

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

    letter-spacing: 0.08em;

    text-transform: uppercase;
}


.wh-title {
    display: block;

    overflow: hidden;

    color: #fff;

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

    line-height: 1.35;

    text-decoration: none;

    white-space: nowrap;
    text-overflow: ellipsis;
}


.wh-title:hover {
    color: #ff7377;
}


.wh-meta {
    display: flex;
    align-items: center;
    gap: 6px;

    overflow: hidden;

    margin-top: 6px;

    color: rgba(
        255,
        255,
        255,
        0.42
    );

    font-size: 11px;

    white-space: nowrap;
}


.wh-dot {
    opacity: 0.5;
}


.wh-date {
    overflow: hidden;

    text-overflow: ellipsis;
}


/* =========================================================
   ACTIONS
========================================================= */

.wh-actions {
    display: flex;
    align-items: center;
    gap: 7px;

    margin-top: 11px;
}


.wh-watch-button {
    flex: 1;

    min-height: 35px;

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

    border-radius: 9px;

    background: rgba(
        255,
        255,
        255,
        0.06
    );

    color: rgba(
        255,
        255,
        255,
        0.88
    );

    font-size: 11px;
    font-weight: 750;

    text-decoration: none;

    transition:
        background 0.2s ease,
        color 0.2s ease;
}


.wh-watch-button span {
    color: #e5484d;

    font-size: 10px;
}


.wh-watch-button:hover {
    background: rgba(
        229,
        72,
        77,
        0.11
    );

    color: #fff;
}


.wh-remove-form {
    flex: 0 0 auto;
}


.wh-remove-button {
    width: 35px;
    height: 35px;

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

    border: 1px solid rgba(
        255,
        255,
        255,
        0.08
    );

    border-radius: 9px;

    background: rgba(
        255,
        255,
        255,
        0.035
    );

    color: rgba(
        255,
        255,
        255,
        0.42
    );

    font-size: 18px;

    cursor: pointer;

    transition:
        color 0.2s ease,
        border-color 0.2s ease,
        background 0.2s ease;
}


.wh-remove-button:hover {
    color: #ff696e;

    border-color: rgba(
        229,
        72,
        77,
        0.25
    );

    background: rgba(
        229,
        72,
        77,
        0.08
    );
}


/* =========================================================
   EMPTY STATE
========================================================= */

.wh-empty {
    min-height: 420px;

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

    padding: 50px 20px;

    text-align: center;
}


.wh-empty-icon {
    width: 72px;
    height: 72px;

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

    margin-bottom: 20px;

    border: 1px solid rgba(
        255,
        255,
        255,
        0.07
    );

    border-radius: 50%;

    background: rgba(
        255,
        255,
        255,
        0.025
    );

    color: rgba(
        255,
        255,
        255,
        0.35
    );

    font-size: 29px;
}


.wh-empty h2 {
    margin: 0;

    font-size: 22px;
}


.wh-empty p {
    max-width: 390px;

    margin:
        10px
        auto
        22px;

    color: rgba(
        255,
        255,
        255,
        0.48
    );

    font-size: 13px;

    line-height: 1.65;
}


.wh-discover-button {
    min-height: 42px;

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

    padding:
        0
        20px;

    border-radius: 11px;

    background:
        linear-gradient(
            135deg,
            #e5484d,
            #c52f3e
        );

    color: #fff;

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

    text-decoration: none;

    box-shadow:
        0 10px 28px
        rgba(229, 72, 77, 0.18);
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .wh-page {
        padding:
            94px
            14px
            90px;
    }


    .wh-header {
        align-items: flex-start;
        gap: 18px;
    }


    .wh-heading h1 {
        font-size: 30px;
    }


    .wh-heading p {
        font-size: 12px;
    }


    .wh-clear-button {
        min-height: 37px;

        padding:
            0
            12px;

        font-size: 11px;
    }


    .wh-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap:
            22px
            11px;
    }


    .wh-poster {
        border-radius: 12px;
    }


    .wh-title {
        font-size: 13px;
    }


    .wh-meta {
        gap: 4px;

        font-size: 10px;
    }


    .wh-watch-button {
        font-size: 10px;
    }


    .wh-episode-badge {
        left: 7px;
        bottom: 7px;

        padding:
            5px
            7px;

        font-size: 9px;
    }

}
/* =========================================================
   HOME - MULTI PLATFORM AUTO SCROLL
   Add this at the END of public/css/style.css
========================================================= */

.sd-auto-platform-section {
    overflow: hidden;
}

.sd-auto-scroll-row {
    scroll-behavior: auto !important;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
}

.sd-auto-scroll-row::-webkit-scrollbar {
    display: none;
}

.sd-auto-scroll-row .sd-poster-card {
    flex: 0 0 auto;
}

/* Keep manual touch scrolling natural on phones/tablets. */
@media (pointer: coarse) {
    .sd-auto-scroll-row {
        scroll-snap-type: x proximity;
    }

    .sd-auto-scroll-row .sd-poster-card {
        scroll-snap-align: start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sd-auto-scroll-row {
        scroll-behavior: auto !important;
    }
}