/* Desktop presentation layer. Mobile layouts remain unchanged below 900px. */
@media (min-width: 900px) {
    :root {
        --desktop-shell-width: 1180px;
        --desktop-gutter: 32px;
        --desktop-radius: 24px;
        --desktop-shadow: 0 24px 70px rgba(40, 66, 59, .13);
    }

    html,
    body {
        background: #eaf0ef;
    }

    body .readform {
        background: #edf2f1;
    }

    body .readbox {
        width: calc(100% - 64px);
        max-width: var(--desktop-shell-width);
        height: calc(100% - 32px);
        margin-top: 16px;
        border: 1px solid rgba(38, 58, 52, .06);
        border-radius: var(--desktop-radius);
        box-shadow: var(--desktop-shadow);
        scrollbar-color: #bcc8c4 transparent;
    }

    body .readbox::-webkit-scrollbar { width: 8px; }
    body .readbox::-webkit-scrollbar-thumb { background: #bec9c6; border: 2px solid transparent; border-radius: 99px; background-clip: padding-box; }

    body.page-home-index .readbox,
    body.page-home-videoplay .readbox,
    body.page-home-videoplay2 .readbox {
        width: min(540px, calc(100% - 64px));
        border-color: rgba(255,255,255,.08);
        background: #09090b;
        box-shadow: 0 24px 80px rgba(0,0,0,.28);
    }

    body.page-home-index .feed-header { padding-top: 24px; }
    body.page-home-index .feed-actions { right: 16px; }
    body.page-home-index .feed-info { padding-left: 24px; }
    body.page-home-index .feed-watch { padding-inline: 24px; }

    body .readbox.has-bottom-tabs { padding-bottom: 96px; }
    body .bottom-tabs {
        bottom: 28px;
        width: min(420px, calc(100% - 80px));
        max-width: 420px;
        padding: 4px 10px;
        overflow: hidden;
        border: 1px solid rgba(33, 46, 42, .08);
        border-radius: 22px;
        box-shadow: 0 14px 42px rgba(27, 45, 40, .18);
    }

    body .bottom-tabs a { height: 64px; border-radius: 16px; transition: color .18s ease, background-color .18s ease, transform .18s ease; }
    body .bottom-tabs a:not([aria-current="page"]):hover { color: #171717; background: rgba(26,183,156,.08); transform: translateY(-1px); }
    body .bottom-tabs svg { width: 25px; height: 25px; }

    body.page-home-index .readbox.has-bottom-tabs { padding-bottom: 64px; }
    body.page-home-index .bottom-tabs {
        bottom: 16px;
        width: min(540px, calc(100% - 64px));
        max-width: 540px;
        padding: 0 10px;
        border: 0;
        border-radius: 0 0 24px 24px;
        box-shadow: none;
    }
    body.page-home-index .bottom-tabs a:not([aria-current="page"]):hover { color: #fff; background: rgba(255,255,255,.06); }

    /* Theater */
    body .theater-page { padding: 0 30px 112px; }
    body .theater-top { margin-inline: -30px; padding: 28px 30px 14px; }
    body .theater-search { height: 54px; padding-inline: 19px; border-radius: 16px; box-shadow: 0 10px 30px rgba(36,75,63,.07); }
    body .theater-search input { font-size: 16px; }
    body .theater-shortcuts { gap: 16px; margin-bottom: 20px; }
    body .theater-shortcuts a,
    body .theater-shortcuts button { min-height: 50px; border-radius: 14px; font-size: 16px; box-shadow: 0 5px 18px rgba(35,56,50,.04); }
    body .theater-filters { margin-bottom: 20px; padding: 16px; border-radius: 16px; }
    body .theater-filter-tags { gap: 10px; }
    body .theater-filter-tags a { padding: 8px 13px; }
    body .theater-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 18px; }
    body .theater-grid > li { padding-bottom: 18px; }
    body .theater-card { border: 1px solid rgba(35,55,49,.06); border-radius: 16px; box-shadow: 0 8px 25px rgba(37,61,54,.06); transition: transform .2s ease, box-shadow .2s ease; }
    body .theater-cover { border-radius: 15px; }
    body .theater-copy { padding: 12px 13px 14px; }

    /* Filter, rankings and latest */
    body .discover-header { min-height: 190px; padding: 22px 32px 50px; }
    body .discover-bar { height: 44px; }
    body .discover-hero-copy { width: calc(100% - 210px); padding-top: 12px; }
    body .discover-header h1 { font-size: 29px; }
    body .discover-header p { max-width: 520px; font-size: 13px; }
    body .discover-kicker { height: 25px; padding-inline: 11px; font-size: 11px; }
    body .discover-hero-art { right: 48px; top: 48px; width: 170px; height: 126px; }
    body .discover-body { min-height: calc(100vh - 190px); margin-top: -30px; padding: 22px 28px 112px; border-radius: 30px 30px 0 0; }
    body .discover-options { flex-wrap: wrap; gap: 9px; overflow: visible; }
    body .discover-options a { padding: 8px 13px; }
    body .discover-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px 16px; }
    body .discover--latest .discover-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 16px; }
    body .discover--latest .discover-card { border-radius: 16px; box-shadow: 0 8px 26px rgba(39,46,44,.07); }
    body .discover--latest .discover-cover { border-radius: 15px 15px 0 0; }
    body .discover-copy h2 { font-size: 15px; }
    body .discover-ranking { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px; }
    body .discover-ranking .discover-card,
    body .discover-ranking .discover-card + .discover-card { min-height: 148px; padding: 12px; border: 1px solid #eef1f0; border-radius: 15px; background: #fff; box-shadow: 0 6px 20px rgba(35,57,50,.045); }
    body .discover-ranking .discover-cover { width: 88px; }
    body .discover--filter .discover-header { padding: 12px 28px 16px; }
    body .discover--filter .discover-body { padding-top: 12px; }

    /* Search */
    body .search-hero { padding: 18px 30px 40px; }
    body .search-nav { height: 48px; }
    body .search-title { font-size: 24px; }
    body .search-form { max-width: 760px; height: 54px; margin: 14px auto 0; padding-left: 19px; border-radius: 17px; }
    body .search-content { min-height: calc(100vh - 180px); margin-top: -20px; padding: 28px 30px 112px; border-radius: 30px 30px 0 0; }
    body .search-summary { margin-bottom: 20px; }
    body .search-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px 16px; }
    body .search-card { border: 1px solid rgba(35,55,49,.055); border-radius: 15px; box-shadow: 0 7px 22px rgba(34,58,51,.055); }
    body .search-cover { aspect-ratio: 3 / 4.2; }

    /* Legacy list views */
    body .home-list-topbar { height: 68px; }
    body .home-list-back { left: 24px; top: 18px; }
    body .home-list-title { font-size: 20px; }
    body .home-list-body { padding: 6px 12px 100px; }
    body .home-list-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 22px 16px; padding: 18px; }
    body .home-list-card { padding: 10px; border-radius: 14px; box-shadow: 0 7px 22px rgba(35,57,50,.055); }

    /* Personal center */
    body .my-hero { padding: 26px 32px 44px; }
    body .my-toolbar { max-width: 1116px; margin: 0 auto; }
    body .my-search { height: 50px; padding-inline: 17px; border-radius: 16px; }
    body .my-tool-button { width: 48px; height: 48px; border-radius: 15px; }
    body .my-page .my-shell {
        display: grid;
        max-width: 1116px;
        grid-template-columns: minmax(0, 1.08fr) minmax(380px, .92fr);
        grid-template-rows: auto auto;
        gap: 18px 20px;
        margin: -16px auto 0;
        padding: 0 0 112px;
    }
    body .my-page .my-profile-card { grid-column: 1; grid-row: 1; min-height: 104px; margin: 0; padding: 18px 22px; border-radius: 18px; }
    body .my-page .my-avatar { width: 58px; height: 58px; }
    body .my-page #userinfo_name { max-width: 300px; font-size: 18px; }
    body .my-page .my-vip-banner { grid-column: 1; grid-row: 2; min-height: 128px; margin: 0; padding: 20px 24px; border-radius: 18px; }
    body .my-page .my-vip-title { font-size: 16px; }
    body .my-page .my-vip-desc { max-width: 560px; font-size: 13px; line-height: 1.7; }
    body .my-page .my-menu-card { grid-column: 2; grid-row: 1 / span 2; align-self: stretch; margin: 0; padding: 8px 0; border-radius: 18px; }
    body .my-page .my-menu-item { min-height: 64px; padding-inline: 22px; }
    body .my-page .my-menu-icon { width: 34px; height: 34px; }
    body .my-page .my-menu-text { font-size: 16px; }
    body .my-more-drawer { width: min(390px, 34vw); min-width: 340px; padding: 26px 22px; border-radius: 22px 0 0 22px; }

    /* History, following, orders and coupons */
    body .record-page { padding-bottom: 112px; }
    body .record-topbar { height: 72px; }
    body .record-back { left: 24px; top: 16px; }
    body .record-title { font-size: 20px; }
    body .record-list,
    body .record-list.linepiclist,
    body .coupon-list { max-width: 1100px; margin-inline: auto; padding: 18px 24px 0; }
    body .record-list:not(.linepiclist) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
    body .record-list.linepiclist ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
    body .record-card,
    body .record-list.linepiclist li { min-height: 132px; margin: 0; padding: 14px; border-radius: 17px; }
    body .record-cover,
    body .record-avatar { width: 78px; height: 104px; }
    body .record-action { right: 2px; bottom: 2px; }
    body.page-my-history .record-list,
    body.page-my-follow .record-list { align-items: start; }
    body.page-my-history .record-card,
    body.page-my-follow .record-card {
        min-height: 132px;
        align-items: flex-start;
        gap: 14px;
        padding: 13px;
        overflow: hidden;
        border-color: rgba(31, 68, 58, .055);
        background: linear-gradient(135deg, #fff 0%, #fbfefd 100%);
        box-shadow: 0 8px 24px rgba(32, 61, 53, .065);
    }
    body.page-my-history .record-avatar,
    body.page-my-follow .record-avatar {
        width: 76px;
        height: 104px;
        border-radius: 12px;
        box-shadow: 0 5px 14px rgba(31, 44, 40, .1);
    }
    body.page-my-history .record-info,
    body.page-my-follow .record-info { min-height: 104px; padding: 2px 0 34px; }
    body.page-my-history .record-name,
    body.page-my-follow .record-name { margin-bottom: 6px; font-size: 16px; line-height: 22px; }
    body.page-my-history .record-meta,
    body.page-my-follow .record-meta { margin-top: 2px; font-size: 12px; line-height: 18px; }
    body.page-my-history .record-action,
    body.page-my-follow .record-action { right: 0; bottom: 0; min-width: 72px; height: 30px; padding-inline: 13px; font-size: 12px; line-height: 30px; }
    body.page-my-history .record-action::after,
    body.page-my-follow .record-action::after { content: "›"; margin-left: 4px; font-size: 16px; font-weight: 500; line-height: 1; }
    body .record-list:not(.linepiclist) > .record-pagination {
        grid-column: 1 / -1;
        width: 100%;
        justify-self: stretch;
        padding: 24px 0;
    }
    body .coupon-tabs { max-width: 620px; margin: 18px auto 4px; }
    body .coupon-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
    body .coupon-card { min-height: 118px; margin: 0; border-radius: 17px; }
    body .coupon-empty,
    body .coupon-load-state { grid-column: 1 / -1; }

    /* Older account and information pages */
    body.page-my-rechargerecord .readbody,
    body.page-my-consumerecord .readbody,
    body.page-my-feedback .readbody,
    body.page-my-removeaccount .readbody,
    body.page-home-copyright .readbody,
    body.page-payment-paypal .paypalbox {
        max-width: 920px;
        margin-inline: auto;
        padding-inline: 28px;
        box-sizing: border-box;
    }
    body.page-my-rechargerecord .txtlist,
    body.page-my-consumerecord .txtlist,
    body.page-my-feedback .feedbacklist { margin-top: 22px; overflow: hidden; border: 1px solid rgba(36,54,49,.07); border-radius: 18px; background: #fff; box-shadow: 0 8px 28px rgba(34,56,50,.055); }
    body.page-my-rechargerecord .txtlist li,
    body.page-my-consumerecord .txtlist li,
    body.page-my-feedback .feedbacklist li { padding: 20px 22px; }
    body.page-my-removeaccount .removeacc { margin-top: 26px; padding: 34px; border-radius: 18px; background: #fff; box-shadow: 0 8px 28px rgba(34,56,50,.055); }

    /* Registration */
    body.page-my-register .readbox { display: grid; grid-template-columns: minmax(280px, .85fr) minmax(420px, 1.15fr); align-content: center; padding: 72px 70px 40px; }
    body.page-my-register .auth_header { position: absolute; }
    body.page-my-register .welcome_section { width: 100%; max-width: 430px; align-self: center; padding: 30px; box-sizing: border-box; }
    body.page-my-register .auth_page_wrapper { width: 100%; max-width: 480px; align-self: center; padding: 30px; border: 1px solid rgba(34,53,48,.07); border-radius: 22px; background: #fff; box-shadow: 0 16px 48px rgba(31,52,46,.09); }
    body.page-my-register .site-footer-copyright { grid-column: 1 / -1; background: transparent; }

    /* Payment and common dialogs */
    body.page-payment-payresult .main_body { display: flex; width: 100%; align-items: center; justify-content: center; background: #f5f7f6; }
    body.page-payment-payresult .nav { position: absolute; inset: 0 0 auto; background: #fff; border-bottom: 1px solid #edf0ef; }
    body.page-payment-payresult .pay_result { width: min(560px, calc(100% - 64px)); margin: 0; padding: 36px; border-radius: 22px; background: #fff; box-shadow: 0 16px 50px rgba(32,53,47,.09); }
    body.page-payment-payresult .pay_box_back { margin-top: 54px; }
    body .popbody { max-width: 520px; padding: 18px 24px; border-radius: 20px; box-shadow: 0 22px 70px rgba(0,0,0,.22); }
    body .logout-dialog { max-width: 390px; border-radius: 18px; }
    body .activation-dialog {
        max-width: 380px;
        padding: 20px 22px 22px;
        border-radius: 18px;
    }
    body .activation-dialog::before { height: 120px; }
    body .activation-close { top: 14px; right: 14px; width: 30px; height: 30px; font-size: 20px; line-height: 28px; }
    body .activation-icon { width: 46px; height: 46px; margin: -4px auto 8px; border-radius: 14px; }
    body .activation-icon svg { width: 23px; height: 23px; }
    body .activation-title { margin-bottom: 3px; font-size: 17px; line-height: 22px; }
    body .activation-desc { margin-bottom: 22px; font-size: 12px; line-height: 18px; }
    body .activation-field-label { margin-bottom: 6px; font-size: 12px; }
    body .activation-input-shell { height: 44px; gap: 8px; padding-inline: 12px; border-radius: 11px; }
    body .activation-input-shell svg { width: 18px; height: 18px; }
    body .activation-input { font-size: 13px; }
    body .activation-tip { min-height: 18px; margin: 8px 2px 14px; font-size: 11px; line-height: 18px; }
    body .activation-actions { gap: 10px; }
    body .activation-btn { height: 40px; border-radius: 11px; font-size: 13px; }
    body .cs-dialog { max-width: 420px; }
    body #feed-comments {
        width: min(520px, calc(100% - 64px));
        height: min(70dvh, 620px);
        max-height: min(70dvh, 620px);
        bottom: 32px;
        border-radius: 20px;
        box-shadow: 0 22px 80px rgba(0,0,0,.24);
        font-size: 13px;
    }
    body #feed-comments .feed-comments-header { min-height: 56px; grid-template-columns: 36px 1fr 36px; padding-inline: 16px; }
    body #feed-comments .feed-comments-header h2 { font-size: 16px; }
    body #feed-comments .feed-comments-header button { width: 36px; height: 36px; font-size: 24px; }
    body #feed-comment-list { padding-inline: 20px; }
    body #feed-comments .feed-comment-item { grid-template-columns: 34px 1fr; gap: 10px; padding-block: 12px; }
    body #feed-comments .feed-comment-avatar { width: 34px; height: 34px; font-size: 12px; }
    body #feed-comments .feed-comment-head strong { font-size: 12px; }
    body #feed-comments .feed-comment-head time,
    body #feed-comments .feed-comment-reply-head time {
        color: #a4aca9;
        font-size: 11px;
        line-height: 16px;
        font-weight: 400;
    }
    body #feed-comments .feed-comment-text { font-size: 13px; line-height: 19px; }
    body #feed-comments .feed-comment-reply-head { font-size: 11px; }
    body #feed-comments .feed-comment-reply-head strong { font-size: 11px; }
    body #feed-comments .feed-comment-reply p { font-size: 12px; line-height: 18px; }
    body #feed-comment-status { font-size: 12px; }
    body #feed-comment-form { padding: 8px 16px 10px; }
    body #feed-comment-form textarea { height: 42px; padding: 10px 12px; border-radius: 11px; font-size: 13px; line-height: 20px; }
    body #feed-comment-submit { width: 64px; height: 42px; border-radius: 11px; font-size: 12px; }
    body #feed-comment-submit svg { width: 14px; height: 14px; }

    html[data-site-theme="dark"] body .readform {
        background: #0b0e0f;
    }
    html[data-site-theme="dark"] body .readbox { border-color: #262d2e; box-shadow: 0 24px 76px rgba(0,0,0,.36); }
    html[data-site-theme="dark"] body .bottom-tabs { border-color: #303637; box-shadow: 0 14px 42px rgba(0,0,0,.34); }
    html[data-site-theme="dark"] body .bottom-tabs a:not([aria-current="page"]):hover { color: #fff; background: rgba(93,218,196,.09); }
    html[data-site-theme="dark"] body .discover-ranking .discover-card,
    html[data-site-theme="dark"] body .discover-ranking .discover-card + .discover-card,
    html[data-site-theme="dark"] body.page-my-rechargerecord .txtlist,
    html[data-site-theme="dark"] body.page-my-consumerecord .txtlist,
    html[data-site-theme="dark"] body.page-my-feedback .feedbacklist,
    html[data-site-theme="dark"] body.page-my-removeaccount .removeacc,
    html[data-site-theme="dark"] body.page-my-register .auth_page_wrapper { color: #e9edec; background: #1b2022; border-color: #2b3234; box-shadow: none; }
}

@media (min-width: 900px) and (hover: hover) {
    body .theater-card:hover,
    body .search-card:hover,
    body .home-list-card:hover,
    body .discover--latest .discover-card:hover,
    body .discover-ranking .discover-card:hover { transform: translateY(-4px); box-shadow: 0 15px 36px rgba(30,58,49,.12); }
    body .my-page .my-menu-item:hover { background: rgba(31,190,163,.055); }
}

@media (min-width: 900px) and (max-width: 1080px) {
    body .theater-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    body .discover-grid,
    body .search-grid,
    body .home-list-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    body .discover--latest .discover-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    body .my-page .my-shell { grid-template-columns: minmax(0, 1fr) minmax(340px, .9fr); }
}