@media (max-width: 760px) {
    :root {
        --mobile-shell: #07080b;
        --mobile-card: #14161c;
        --mobile-card-2: #1b1e26;
        --mobile-line: rgba(255, 255, 255, 0.1);
    }

    html,
    body {
        width: 100%;
        overflow-x: hidden;
        background: var(--mobile-shell);
    }

    body {
        font-size: 15px;
    }

    img,
    video {
        max-width: 100%;
    }

    .page-shell,
    .account-grid,
    .auth-panel,
    .flash {
        width: min(100% - 24px, 100%);
    }

    .site-header {
        min-height: 56px;
        padding: 0 12px;
        gap: 8px;
        background: rgba(7, 8, 11, 0.92);
        border-bottom-color: rgba(255, 255, 255, 0.06);
    }

    .brand {
        min-width: 0;
        max-width: calc(100vw - 110px);
        gap: 8px;
        font-size: 15px;
    }

    .brand span:last-child {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .brand-mark {
        width: 30px;
        height: 30px;
        flex: 0 0 30px;
        font-size: 15px;
    }

    .icon-menu {
        display: inline-grid;
        width: 38px;
        height: 38px;
        flex: 0 0 38px;
        place-items: center;
        order: -1;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.06);
    }

    .header-actions {
        display: none;
    }

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

    .header-actions .btn-small {
        min-height: 32px;
        max-width: 82px;
        overflow: hidden;
        padding: 0 10px;
        border-radius: 999px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-site-nav {
        position: fixed;
        left: 0;
        right: auto;
        top: 0;
        bottom: 0;
        z-index: 80;
        display: flex !important;
        width: min(86vw, 330px);
        height: 100vh;
        height: 100dvh;
        box-sizing: border-box;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        border: 0;
        border-right: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 0;
        padding: calc(14px + env(safe-area-inset-top)) 12px calc(22px + env(safe-area-inset-bottom));
        background: #0b0d12;
        box-shadow: 20px 0 60px rgba(0, 0, 0, 0.48);
        backdrop-filter: blur(18px);
        transform: translateX(-105%);
        transition: transform 0.24s ease;
    }

    .mobile-site-nav.open {
        transform: translateX(0);
    }

    body.menu-open {
        overflow: hidden;
    }

    body.menu-open::before {
        position: fixed;
        inset: 0;
        z-index: 70;
        background: rgba(0, 0, 0, 0.58);
        content: "";
    }

    .mobile-nav-head {
        display: flex;
        flex: 0 0 auto;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        border-bottom: 1px solid var(--mobile-line);
        padding: 2px 2px 12px;
    }

    .mobile-nav-head strong {
        font-size: 18px;
    }

    .mobile-menu-close {
        display: inline-grid;
        width: 36px;
        height: 36px;
        place-items: center;
        border: 1px solid var(--mobile-line);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.06);
        color: #fff;
        font-size: 24px;
    }

    .mobile-nav-section {
        display: block !important;
        flex: 0 0 auto;
        border-top: 1px solid var(--mobile-line);
        margin-top: 12px;
        padding-top: 12px;
        opacity: 1;
        visibility: visible;
    }

    .mobile-nav-main {
        border-top: 1px solid var(--mobile-line);
        margin-top: 12px;
        padding-top: 12px;
    }

    .mobile-nav-title {
        margin-bottom: 9px;
        color: var(--gold);
        font-size: 12px;
        font-weight: 900;
        text-transform: uppercase;
    }

    .mobile-nav-status {
        display: flex !important;
        flex: 0 0 auto;
        flex-direction: column;
        gap: 8px;
        margin-top: 12px;
        border: 1px solid rgba(232, 80, 63, 0.26);
        border-radius: 14px;
        padding: 12px;
        background: linear-gradient(135deg, rgba(232, 80, 63, 0.2), rgba(255, 255, 255, 0.045));
    }

    .mobile-nav-userline {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(106px, 42%);
        gap: 10px;
        align-items: stretch;
    }

    .mobile-nav-userline > div {
        display: flex;
        min-width: 0;
        flex-direction: column;
        gap: 4px;
        justify-content: center;
    }

    .mobile-nav-status strong {
        color: #fff;
        font-size: 16px;
        line-height: 1.25;
    }

    .mobile-nav-status small,
    .mobile-menu-links small,
    .mobile-plan-chip small,
    .mobile-category-links span {
        color: #8f96a3;
        font-size: 11px;
        font-weight: 700;
        line-height: 1.3;
    }

    .mobile-nav-kicker {
        color: var(--gold);
        font-size: 11px;
        font-weight: 900;
        text-transform: uppercase;
    }

    .mobile-plan-chip {
        display: flex !important;
        min-height: 58px !important;
        align-items: flex-start !important;
        flex-direction: column;
        justify-content: center !important;
        gap: 2px;
        border: 1px solid rgba(242, 184, 75, 0.35);
        border-radius: 12px !important;
        padding: 9px 10px !important;
        background: rgba(242, 184, 75, 0.08) !important;
    }

    .mobile-plan-chip span {
        color: var(--gold);
        font-size: 10px;
        font-weight: 900;
        line-height: 1.2;
        text-transform: uppercase;
    }

    .mobile-plan-chip strong {
        display: -webkit-box;
        overflow: hidden;
        font-size: 13px;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .mobile-nav-actions {
        display: flex;
        gap: 8px;
        align-items: center;
    }

    .mobile-nav-status-action {
        display: inline-flex !important;
        width: fit-content;
        min-height: 32px !important;
        border-radius: 999px !important;
        padding: 0 12px !important;
        color: #fff !important;
        background: rgba(232, 80, 63, 0.82) !important;
        font-size: 12px !important;
    }

    .mobile-nav-status-action.muted {
        background: rgba(255, 255, 255, 0.08) !important;
    }

    .mobile-menu-links,
    .mobile-account-links {
        display: grid;
        gap: 8px;
    }

    .mobile-site-nav a {
        display: flex;
        min-height: 46px;
        align-items: center;
        justify-content: flex-start;
        border-radius: 12px;
        padding: 0 12px;
        color: #aeb4bf;
        background: rgba(255, 255, 255, 0.04);
        font-size: 14px;
        font-weight: 800;
    }

    .mobile-menu-links a {
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 3px;
        padding: 9px 12px;
    }

    .mobile-menu-links a span {
        color: #eef1f5;
        font-size: 14px;
    }

    .mobile-site-nav > .desktop-nav-link {
        display: none;
    }

    .mobile-site-nav a.active {
        background: rgba(232, 80, 63, 0.16);
        color: #fff;
    }

    .mobile-account-card {
        min-height: 60px !important;
        align-items: flex-start !important;
        flex-direction: column;
        justify-content: center !important;
        gap: 2px;
        padding: 10px 12px !important;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.035)) !important;
    }

    .mobile-account-card span {
        color: #8f96a3;
        font-size: 11px;
        font-weight: 800;
        text-transform: uppercase;
    }

    .mobile-account-card strong {
        color: #fff;
        font-size: 14px;
    }

    .mobile-nav-categories summary {
        display: flex;
        min-height: 50px;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        border: 1px solid var(--mobile-line);
        border-radius: 12px;
        padding: 0 12px;
        background: rgba(255, 255, 255, 0.04);
        color: #fff;
        cursor: pointer;
        font-size: 14px;
        font-weight: 900;
        list-style: none;
    }

    .mobile-nav-categories summary::-webkit-details-marker {
        display: none;
    }

    .mobile-nav-categories summary::after {
        width: 22px;
        height: 22px;
        flex: 0 0 22px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.08);
        color: var(--gold);
        content: "+";
        display: inline-grid;
        place-items: center;
        font-size: 15px;
        line-height: 1;
    }

    .mobile-nav-categories[open] summary::after {
        content: "-";
    }

    .mobile-nav-categories summary small {
        margin-left: auto;
        color: #8f96a3;
        font-size: 11px;
        font-weight: 800;
    }

    .mobile-category-links {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin-top: 8px;
    }

    .mobile-nav-categories:not([open]) .mobile-category-links {
        display: none;
    }

    .mobile-nav-categories[open] .mobile-category-links {
        display: grid;
    }

    .mobile-nav-categories summary {
        display: flex;
        min-height: 50px;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        border: 1px solid var(--mobile-line);
        border-radius: 12px;
        padding: 0 12px;
        background: rgba(255, 255, 255, 0.04);
        color: #fff;
        cursor: pointer;
        font-size: 14px;
        font-weight: 900;
        list-style: none;
    }

    .mobile-nav-categories summary::-webkit-details-marker {
        display: none;
    }

    .mobile-nav-categories summary::after {
        width: 22px;
        height: 22px;
        flex: 0 0 22px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.08);
        color: var(--gold);
        content: "+";
        display: inline-grid;
        place-items: center;
        font-size: 15px;
        line-height: 1;
    }

    .mobile-nav-categories[open] summary::after {
        content: "-";
    }

    .mobile-nav-categories summary small {
        margin-left: auto;
        color: #8f96a3;
        font-size: 11px;
        font-weight: 800;
    }

    .mobile-category-links {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin-top: 8px;
    }

    .mobile-nav-categories:not([open]) .mobile-category-links {
        display: none;
    }

    .mobile-nav-categories[open] .mobile-category-links {
        display: grid;
    }

    .mobile-category-links a {
        min-height: 58px;
        align-items: flex-start;
        flex-direction: column;
        justify-content: center;
        gap: 3px;
        padding: 9px 10px;
        font-size: 12px;
    }

    .mobile-category-links strong {
        color: #fff;
        font-size: 13px;
        line-height: 1.2;
    }

    .btn {
        min-height: 44px;
        border-radius: 12px;
    }

    .section {
        padding: 28px 0;
    }

    .section-heading,
    .checkout-heading,
    .category-page-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
        margin-bottom: 14px;
    }

    .section-heading h1,
    .section-heading h2 {
        margin: 0;
        font-size: 23px;
        line-height: 1.16;
    }

    .section-note {
        max-width: 100%;
        font-size: 14px;
        line-height: 1.5;
    }

    .hero {
        width: calc(100% - 24px);
        min-height: 64svh;
        margin: 10px auto 0;
        align-items: flex-end;
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 18px;
        background: var(--mobile-card);
        box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
    }

    .hero::before {
        background: linear-gradient(0deg, rgba(7, 8, 11, 0.98) 0%, rgba(7, 8, 11, 0.78) 44%, rgba(7, 8, 11, 0.14) 100%);
    }

    .hero-media {
        height: 100%;
        object-fit: cover;
        object-position: center top;
    }

    .hero-content {
        width: 100%;
        padding: 0 16px 22px;
    }

    .hero h1 {
        max-width: 100%;
        margin: 9px 0;
        font-size: 34px;
        line-height: 1.02;
    }

    .hero p {
        display: -webkit-box;
        max-width: 100%;
        margin: 0 0 14px;
        overflow: hidden;
        color: #e9e0d4;
        font-size: 14px;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
    }

    .hero-meta,
    .meta-row {
        gap: 7px;
    }

    .pill {
        min-height: 24px;
        padding: 0 9px;
        font-size: 11px;
    }

    .hero-actions,
    .form-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-top: 16px;
    }

    .hero-actions .btn,
    .form-actions .btn {
        width: 100%;
        padding: 0 10px;
    }

    .rail {
        grid-auto-columns: minmax(142px, 44vw);
        gap: 12px;
        margin-left: -12px;
        margin-right: -12px;
        padding: 2px 12px 12px;
        scrollbar-width: none;
    }

    .rail::-webkit-scrollbar,
    .category-strip::-webkit-scrollbar,
    .filter-list::-webkit-scrollbar {
        display: none;
    }

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

    .poster {
        border-radius: 14px;
    }

    .badge-stack {
        top: 8px;
        left: 8px;
        gap: 4px;
    }

    .badge {
        min-height: 21px;
        padding: 0 7px;
        font-size: 10px;
    }

    .card-title {
        margin-top: 8px;
        font-size: 14px;
    }

    .card-meta {
        display: -webkit-box;
        overflow: hidden;
        font-size: 11px;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .category-band {
        display: none;
    }

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

    .category-card,
    .category-card-large {
        min-height: 86px;
        border-radius: 14px;
        padding: 13px;
        background: linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
    }

    .category-card-large strong {
        font-size: 15px;
    }

    .browse-layout,
    .detail-hero,
    .watch-layout,
    .checkout-grid,
    .payment-layout {
        display: grid;
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 18px 0 38px;
    }

    .browse-layout main {
        min-width: 0;
    }

    .filter-panel {
        display: none;
    }

    .category-strip {
        display: flex;
        gap: 8px;
        margin-left: -12px;
        margin-right: -12px;
        overflow-x: auto;
        padding: 0 12px 12px;
        scrollbar-width: none;
    }

    .category-strip a {
        min-height: 34px;
        flex: 0 0 auto;
        white-space: nowrap;
        border: 1px solid var(--mobile-line);
        border-radius: 999px;
        padding: 0 12px;
        background: rgba(255, 255, 255, 0.05);
        font-size: 13px;
    }

    .search-row {
        grid-template-columns: 1fr;
        gap: 8px;
        margin-bottom: 16px;
    }

    .search-row .btn {
        width: 100%;
    }

    .browse-layout .grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
        gap: 16px 12px;
    }

    .browse-layout .series-card {
        display: block;
        min-width: 0;
    }

    .browse-layout .poster {
        width: 100%;
        aspect-ratio: 2 / 3;
        border-radius: 14px;
        background: #1f232b;
    }

    .browse-layout .poster img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .browse-layout .card-title {
        display: -webkit-box;
        margin: 8px 0 3px;
        overflow: hidden;
        color: #fff;
        font-size: 14px;
        line-height: 1.22;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .browse-layout .card-meta {
        display: -webkit-box;
        overflow: hidden;
        line-height: 1.35;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .input,
    .select,
    .textarea {
        min-height: 46px;
        border-radius: 12px;
        font-size: 16px;
    }

    .detail-poster {
        width: min(220px, 58vw);
        margin: 0 auto;
        border-radius: 16px;
    }

    .detail-page {
        padding-top: 54px;
    }

    .detail-back {
        top: 10px;
        left: 12px;
        width: 38px;
        height: 38px;
        font-size: 30px;
    }

    .detail-copy h1 {
        font-size: 31px;
        line-height: 1.05;
    }

    .detail-copy .hook {
        font-size: 16px;
    }

    .detail-copy p {
        font-size: 14px;
    }

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

    .episode-link {
        min-height: 54px;
        border-radius: 12px;
        padding: 8px;
        background: var(--mobile-card);
    }

    .episode-title {
        font-size: 13px;
    }

    .episode-state {
        font-size: 11px;
    }

    .watch-layout {
        width: 100%;
        padding-top: 0;
    }

    .video-frame {
        width: calc(100% + 24px);
        margin-left: -12px;
        margin-right: -12px;
        border-radius: 0 0 18px 18px;
        aspect-ratio: 9 / 12;
        background: #000;
    }

    .video-frame video {
        object-fit: contain;
    }

    .player-meta {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
        padding: 14px 0;
    }

    .player-meta h1 {
        font-size: 20px;
        line-height: 1.25;
    }

    .player-access {
        gap: 7px;
    }

    .paywall-inline {
        align-items: stretch;
        flex-direction: column;
        border-radius: 14px;
    }

    .sidebar-panel {
        border-radius: 14px;
        padding: 12px;
        background: var(--mobile-card);
    }

    .episode-list {
        max-height: none;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .checkout-grid {
        padding-top: 6px;
    }

    .checkout-summary {
        position: static;
        border-radius: 16px;
        padding: 14px;
        background: var(--mobile-card);
    }

    .checkout-section-title {
        gap: 10px;
        margin-bottom: 12px;
    }

    .checkout-section-title h2 {
        font-size: 18px;
    }

    .checkout-section-title p {
        font-size: 13px;
    }

    .pricing-grid,
    .pricing-grid.selectable {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 0;
    }

    .plan-choice .plan-card {
        border-radius: 16px;
        padding: 16px 42px 16px 14px;
        background: var(--mobile-card);
    }

    .plan-card h2 {
        margin-top: 0;
        font-size: 20px;
    }

    .price {
        margin: 10px 0 2px;
        font-size: 28px;
    }

    .benefits {
        margin: 12px 0;
    }

    .payment-options {
        gap: 10px;
    }

    .payment-card {
        border-radius: 14px;
        padding: 13px 42px 13px 13px;
        background: #111319;
    }

    .checkout-button,
    .auth-panel .btn {
        width: 100%;
    }

    .payment-panel,
    .payment-summary,
    .auth-panel {
        border-radius: 16px;
        padding: 16px;
        background: var(--mobile-card);
    }

    .payment-panel h2,
    .payment-summary h2 {
        font-size: 18px;
    }

    .summary-row,
    .summary-total {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }

    .form-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .notice {
        border-radius: 14px;
    }

    .modal-box {
        width: 100%;
        border-radius: 16px;
        padding: 18px;
    }

    .watch-page-body {
        overflow: hidden;
    }

    .watch-fullscreen {
        min-height: 100vh;
        min-height: 100svh;
    }

    .watch-video-frame video {
        object-fit: cover;
    }

    .watch-overlay-top {
        top: max(12px, env(safe-area-inset-top));
        right: 12px;
        left: 12px;
        gap: 10px;
    }

    .watch-back {
        width: 38px;
        height: 38px;
        font-size: 30px;
    }

    .watch-top-title strong {
        font-size: 15px;
    }

    .watch-top-title span,
    .watch-top-title small {
        font-size: 10px;
    }

    .watch-overlay-bottom {
        right: 12px;
        bottom: max(14px, env(safe-area-inset-bottom));
        left: 12px;
    }

    .watch-copy {
        max-width: 100%;
        padding-right: 0;
    }

    .watch-copy h1 {
        max-width: 15ch;
        margin-top: 4px;
        font-size: 28px;
        line-height: 1.05;
    }

    .watch-copy p {
        max-width: 100%;
        margin-bottom: 10px;
        font-size: 13px;
        line-height: 1.4;
        -webkit-line-clamp: 2;
    }

    .watch-paywall {
        max-width: 100%;
        gap: 8px;
        border-radius: 16px;
        padding: 8px;
    }

    .watch-paywall strong {
        min-width: 0;
        font-size: 12px;
    }

    .watch-episode-picker {
        width: min(300px, 100%);
        margin-top: 10px;
    }

    .watch-episode-picker summary {
        min-height: 38px;
        padding: 0 12px;
        font-size: 12px;
    }

    .watch-mini-list {
        bottom: 46px;
        width: calc(100vw - 24px);
        max-height: 42vh;
        border-radius: 14px;
    }

    .watch-mini-list .episode-link {
        min-height: 44px;
    }

    .watch-episode-dots {
        left: 8px;
        gap: 5px;
    }

    .watch-episode-dots span {
        width: 3px;
        height: 12px;
    }

    .watch-episode-dots span.active {
        height: 26px;
    }

    .footer {
        padding: 22px 12px;
        font-size: 12px;
    }
}

@media (max-width: 380px) {
    .hero h1 {
        font-size: 30px;
    }

    .hero-actions,
    .form-actions {
        grid-template-columns: 1fr;
    }

    .category-grid,
    .category-grid-large {
        grid-template-columns: 1fr;
    }

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

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