/* Final homepage layer. Keep homepage refinements isolated from shared pages. */
.desktop-home-page .menu-btn {
    padding: 0;
    border: 0;
    color: inherit;
    background: transparent;
    font: inherit;
}

@media (min-width: 761px) {
    .desktop-home-page {
        --home-gold: #ddb45f;
        --home-gold-soft: #f2d89d;
        --home-dark: #0e171b;
        --home-dark-soft: #162328;
        --home-line: rgba(218, 229, 229, .82);
        color: #263034;
        background: #edf1f3 !important;
    }

    .desktop-home-page .desktop-shell,
    .desktop-home-page > .container,
    .desktop-home-page .desktop-utility .desktop-shell,
    .desktop-home-page .desktop-header-inner,
    .desktop-home-page .desktop-hero-inner {
        width: min(1480px, calc(100% - 48px)) !important;
        max-width: 1480px !important;
    }

    .desktop-home-page .desktop-utility {
        position: absolute;
        inset: 0 0 auto;
        z-index: 901;
        height: 30px;
        color: rgba(238, 243, 242, .8);
        background: transparent;
    }

    .desktop-home-page .desktop-site-header {
        position: absolute;
        top: 24px;
        right: 0;
        left: 0;
        z-index: 900;
        border: 0;
        background: transparent;
    }

    .desktop-home-page .desktop-header-inner {
        min-height: 58px;
        align-items: center;
    }

    .desktop-home-page .desktop-main-nav a {
        min-width: 96px;
        min-height: 40px;
        align-self: center;
        color: #e8efed;
        border: 1px solid rgba(211, 226, 228, .42);
        border-radius: 5px;
        background: rgba(7, 19, 25, .42);
        backdrop-filter: blur(7px);
    }

    .desktop-home-page .desktop-main-nav a:hover,
    .desktop-home-page .desktop-main-nav a.active {
        color: #fff3d0;
        border-color: rgba(234, 204, 139, .7);
        background: rgba(18, 29, 32, .65);
    }

    .desktop-home-page .desktop-main-nav a::after {
        right: 14px;
        bottom: -1px;
        left: 14px;
        background: var(--home-gold);
    }

    .desktop-home-page .desktop-hero {
        height: 276px;
        filter: none;
        background-color: #13262e;
        background-image: url('../img/hero-wuxia-v2.webp');
        background-position: center 49%;
        background-size: cover;
    }

    .desktop-home-page .desktop-hero::before {
        z-index: 0;
        background:
            linear-gradient(180deg, rgba(5, 16, 23, .16), rgba(5, 15, 21, .06) 48%, rgba(4, 13, 18, .58)),
            linear-gradient(90deg, rgba(3, 15, 22, .62), rgba(5, 18, 24, .15) 55%, rgba(4, 15, 20, .22));
    }

    .desktop-home-page .desktop-hero::after {
        content: '';
        position: absolute;
        inset: auto 0 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(224, 190, 119, .78), transparent);
    }

    .desktop-home-page .desktop-hero-inner {
        z-index: 1;
        align-items: center;
    }

    .desktop-home-page .desktop-hero-inner > div {
        max-width: 480px;
        margin: 16px 0 26px !important;
    }

    .desktop-home-page .desktop-hero h1 {
        margin: 0;
        color: #f0e2c8;
        font: 700 40px/1.2 "STKaiti", "KaiTi", serif;
        letter-spacing: 3px;
        text-shadow: 0 2px 12px rgba(0, 0, 0, .5);
    }

    .desktop-home-page > .container {
        position: relative;
        display: block;
        margin-top: 0 !important;
        margin-bottom: 48px !important;
    }

    .desktop-home-page > .container > .content {
        width: 100%;
        padding-top: 0 !important;
    }

    .desktop-home-page .home-category-nav {
        position: absolute;
        top: -88px;
        left: 0;
        z-index: 20;
        width: calc(100% - 610px);
        height: 70px;
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 0;
        margin: 0;
        padding: 0;
        overflow: hidden;
        border: 1px solid rgba(191, 209, 210, .3);
        border-radius: 8px;
        background: rgba(8, 21, 27, .9);
        box-shadow: 0 14px 32px rgba(5, 17, 22, .24);
        backdrop-filter: blur(12px);
    }

    .desktop-home-page .home-category-nav a {
        min-width: 0;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 0 10px;
        overflow: hidden;
        border: 0;
        border-right: 1px solid rgba(196, 213, 214, .16);
        border-radius: 0;
        color: #c9d5d5;
        background: transparent;
        font-size: 13px;
        transition: color .18s ease, background .18s ease;
    }

    .desktop-home-page .home-category-nav a:last-child { border-right: 0; }
    .desktop-home-page .home-category-nav a:hover { color: #fff; background: rgba(113, 157, 164, .13); }

    .desktop-home-page .home-category-nav a.active {
        color: #251b0b;
        background: linear-gradient(135deg, #e6c16d, #c99a43);
        box-shadow: inset 0 -3px 0 #f4d58f;
    }

    .desktop-home-page .home-category-icon {
        width: 30px;
        height: 30px;
        display: grid;
        flex: 0 0 30px;
        place-items: center;
        color: #d9bd82;
    }

    .desktop-home-page .home-category-nav a.active .home-category-icon { color: #3a2a11; }
    .desktop-home-page .home-category-icon svg { width: 24px; height: 24px; stroke-width: 1.75; }

    .desktop-home-page .home-category-label {
        min-width: 0;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .desktop-home-page .home-category-label > span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .desktop-home-page .home-category-nav a strong {
        min-width: 21px;
        height: 19px;
        padding: 0 5px;
        color: #d9e2e2;
        background: rgba(215, 228, 228, .13);
        font-size: 10px;
    }

    .desktop-home-page .home-category-nav a.active strong {
        color: #55401a;
        background: rgba(255, 248, 226, .78);
    }

    .desktop-home-page .desktop-home-aside {
        position: absolute;
        top: -230px;
        right: 0;
        z-index: 24;
        width: 525px;
    }

    .desktop-home-page .desktop-account-card {
        min-height: 142px;
        display: grid;
        grid-template-columns: 178px minmax(0, 1fr);
        grid-template-rows: auto auto;
        align-items: center;
        padding: 16px 16px 16px 20px;
        border: 1px solid rgba(194, 213, 216, .38);
        border-radius: 10px;
        color: #e8efed;
        background: rgba(8, 18, 23, .91);
        box-shadow: 0 16px 38px rgba(4, 13, 17, .32);
        backdrop-filter: blur(13px);
    }

    .desktop-home-page .desktop-account-head {
        grid-column: 1;
        grid-row: 1;
        gap: 12px;
    }

    .desktop-home-page .desktop-account-head strong {
        margin: 0;
        overflow: hidden;
        color: #f3eee5;
        font-size: 18px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .desktop-home-page .desktop-account-logout { color: #b9c2bf; }

    .desktop-home-page .desktop-account-card > p {
        grid-column: 1;
        grid-row: 2;
        margin: 2px 0 0;
        color: #b8c4c1;
    }

    .desktop-home-page .desktop-account-actions {
        grid-column: 2;
        grid-row: 1 / span 2;
        height: 78px;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 6px;
        padding-left: 12px;
        border-left: 1px solid rgba(205, 220, 220, .18);
    }

    .desktop-home-page .desktop-account-actions .desktop-account-action {
        min-width: 0;
        min-height: 78px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        padding: 0 5px;
        border: 1px solid rgba(204, 220, 220, .3);
        border-radius: 6px;
        color: #dce5e2;
        background: rgba(255, 255, 255, .025);
        font-size: 12px;
        font-weight: 700;
        white-space: nowrap;
    }

    .desktop-home-page .desktop-account-actions .desktop-account-action:hover {
        color: #fff4d8;
        border-color: rgba(226, 190, 112, .65);
        background: rgba(226, 190, 112, .09);
    }

    .desktop-home-page .desktop-account-actions .desktop-account-profile {
        color: #2f230f;
        border-color: #ddb45f;
        background: linear-gradient(135deg, #e9c46f, #d4a74d);
        box-shadow: none;
    }

    .desktop-home-page .desktop-account-actions svg { width: 24px; height: 24px; stroke-width: 1.7; }

    .desktop-home-page .desktop-account-card > strong {
        grid-column: 1 / -1;
        margin: 0 0 4px;
        color: #f2eadb;
        font-size: 20px;
    }

    .desktop-home-page .desktop-account-card > strong + p {
        grid-column: 1 / -1;
        grid-row: auto;
        margin-bottom: 12px;
    }

    .desktop-home-page .desktop-guest-actions {
        grid-column: 1 / -1;
        display: flex;
        gap: 10px;
    }

    .desktop-home-page .desktop-guest-actions a {
        min-height: 36px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0 15px;
        border: 1px solid rgba(221, 180, 95, .72);
        border-radius: 5px;
        color: #291f0f;
        background: #ddb45f;
        font-weight: 700;
    }

    .desktop-home-page .desktop-guest-actions a + a {
        color: #e1e9e6;
        border-color: rgba(203, 219, 220, .4);
        background: transparent;
    }

    .desktop-home-page .post-sort-nav {
        min-height: 52px;
        margin: 18px 0 22px;
        padding: 8px 12px;
        border: 1px solid #d8e0e1;
        border-radius: 7px;
        background: rgba(255, 255, 255, .96);
        box-shadow: 0 7px 20px rgba(29, 53, 60, .06);
    }

    .desktop-home-page .post-sort-label,
    .desktop-home-page .post-sort-nav a { height: 34px; border-radius: 17px; }
    .desktop-home-page .post-sort-nav a:hover { color: #315f68; background: #edf5f6; }
    .desktop-home-page .post-sort-nav a.active { color: #fff; background: #315f68; }

    .desktop-home-page .post-list {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 18px;
    }

    .desktop-home-page .post-item {
        min-width: 0;
        min-height: 310px;
        height: auto;
        display: block;
        overflow: hidden;
        padding: 0 !important;
        border: 1px solid #d6dfe0 !important;
        border-radius: 9px !important;
        color: #263034;
        background: #fff !important;
        box-shadow: 0 7px 20px rgba(25, 48, 55, .08) !important;
        transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
    }

    .desktop-home-page .post-item:hover {
        border-color: #a9bdc1 !important;
        transform: translateY(-3px);
        box-shadow: 0 13px 28px rgba(23, 45, 52, .14) !important;
    }

    .desktop-home-page .post-list-card-layout {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .desktop-home-page .post-card-media {
        position: relative;
        width: 100%;
        aspect-ratio: 3 / 2;
        flex: 0 0 auto;
        overflow: hidden;
        background: #17272d;
    }

    .desktop-home-page .post-card-media::before {
        content: '';
        position: absolute;
        inset: -12px;
        z-index: 0;
        background-image: var(--post-card-image, none);
        background-position: center;
        background-size: cover;
        filter: blur(12px) brightness(.62) saturate(.88);
        transform: scale(1.08);
    }

    .desktop-home-page .post-card-media::after {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 2;
        background: linear-gradient(180deg, rgba(3, 10, 13, .02) 25%, rgba(4, 11, 14, .16) 48%, rgba(4, 10, 13, .92) 100%);
        pointer-events: none;
    }

    .desktop-home-page .post-list-thumbnail {
        position: absolute;
        inset: 0;
        z-index: 1;
        width: 100%;
        height: 100%;
        border: 0;
        border-radius: 0;
        object-fit: contain;
        background: transparent;
    }

    .desktop-home-page .post-list-thumbnail-placeholder {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        color: rgba(235, 224, 199, .78);
        background:
            radial-gradient(circle at 72% 28%, rgba(221, 180, 95, .18), transparent 28%),
            linear-gradient(145deg, #1d343b, #10242b 55%, #172126);
    }

    .desktop-home-page .post-list-thumbnail-placeholder svg {
        position: absolute;
        top: 29%;
        left: 50%;
        width: 46px;
        height: 46px;
        opacity: .38;
        transform: translate(-50%, -50%);
    }

    .desktop-home-page .post-list-thumbnail-placeholder span { display: none; }

    .desktop-home-page .post-list-thumbnail-placeholder.category-1 { background: radial-gradient(circle at 74% 30%, rgba(222, 184, 106, .2), transparent 30%), linear-gradient(145deg, #263b3e, #122b31 56%, #172126); }
    .desktop-home-page .post-list-thumbnail-placeholder.category-3 { background: radial-gradient(circle at 70% 26%, rgba(110, 169, 151, .22), transparent 30%), linear-gradient(145deg, #244039, #132d2a 58%, #172126); }
    .desktop-home-page .post-list-thumbnail-placeholder.category-6 { background: radial-gradient(circle at 72% 27%, rgba(102, 149, 185, .24), transparent 30%), linear-gradient(145deg, #263c4b, #142b38 58%, #172126); }
    .desktop-home-page .post-list-thumbnail-placeholder.category-7 { background: radial-gradient(circle at 72% 26%, rgba(180, 137, 93, .23), transparent 30%), linear-gradient(145deg, #43352c, #2a2724 58%, #172126); }

    .desktop-home-page .post-list-thumbnail-placeholder svg { stroke-width: 1.35; }

    .desktop-home-page .post-card-image-overlay {
        position: absolute;
        inset: 0;
        z-index: 3;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding: 42px 13px 11px;
        color: #fff;
        text-shadow: 0 1px 4px rgba(0, 0, 0, .92);
    }

    .desktop-home-page .post-author-row { margin-bottom: 4px; }
    .desktop-home-page .post-author-avatar { width: 20px; height: 20px; flex: 0 0 20px; }
    .desktop-home-page .post-author-name { overflow: hidden; color: rgba(255, 255, 255, .9) !important; text-overflow: ellipsis; white-space: nowrap; }

    .desktop-home-page .post-category-badge {
        width: fit-content;
        margin: 0 0 5px;
        padding: 1px 6px;
        border-left: 3px solid var(--home-gold);
        color: #f5dfaa;
        background: rgba(5, 13, 16, .5);
        font-size: 11px;
    }

    .desktop-home-page .post-title {
        min-height: 40px;
        display: -webkit-box;
        overflow: hidden;
        color: #fff !important;
        font-size: 16px !important;
        font-weight: 800;
        line-height: 1.35;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .desktop-home-page .post-list-card-main {
        min-height: 0;
        display: flex;
        flex: 1;
        flex-direction: column;
        padding: 10px 12px 11px;
        color: #263034;
        background: #fff;
    }

    .desktop-home-page .post-card-status-row { min-height: 22px; display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 5px; }
    .desktop-home-page .post-card-status-row:empty { min-height: 0; margin: 0; }
    .desktop-home-page .post-pin-state,
    .desktop-home-page .post-review-state { position: static; margin: 0; padding: 3px 7px; font-size: 11px; text-shadow: none; }

    .desktop-home-page .post-paid-tip,
    .desktop-home-page .post-content {
        margin: 0 0 6px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .desktop-home-page .post-paid-tip { color: #d84b43; font-size: 12px; }
    .desktop-home-page .post-content { min-height: 18px; color: #748084 !important; font-size: 13px; }

    .desktop-home-page .post-footer {
        min-width: 0;
        display: flex;
        gap: 7px;
        margin-top: auto;
        color: #748084 !important;
        font-size: 10.5px;
        white-space: nowrap;
    }

    .desktop-home-page .post-footer span { min-width: 0; }
    .desktop-home-page .post-footer span:nth-child(2) { display: flex; }
    .desktop-home-page .desktop-bottom-publish { margin-top: 22px; }
    .desktop-home-page .desktop-bottom-publish a { background: #315f68; box-shadow: 0 7px 18px rgba(49, 95, 104, .18); }
}

@media (min-width: 1100px) and (max-width: 1439px) {
    .desktop-home-page .home-category-nav { width: calc(100% - 480px); }
    .desktop-home-page .desktop-home-aside { width: 460px; }
    .desktop-home-page .desktop-account-card { grid-template-columns: 148px minmax(0, 1fr); padding-left: 16px; }
    .desktop-home-page .desktop-account-actions { padding-left: 9px; gap: 4px; }
    .desktop-home-page .desktop-account-actions .desktop-account-action { font-size: 11px; }
    .desktop-home-page .post-list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; }
}

@media (min-width: 761px) and (max-width: 1099px) {
    .desktop-home-page .desktop-hero { height: 235px; }
    .desktop-home-page .desktop-hero h1 { font-size: 34px; }
    .desktop-home-page > .container { display: flex; flex-direction: column; margin-top: 16px !important; }
    .desktop-home-page .desktop-home-aside { position: static; order: 1; width: 100%; margin-bottom: 14px; }
    .desktop-home-page > .container > .content { order: 2; }
    .desktop-home-page .home-category-nav { position: static; width: 100%; height: 66px; margin-bottom: 14px; }
    .desktop-home-page .desktop-account-card { min-height: 108px; }
    .desktop-home-page .post-sort-nav { margin-top: 0; }
    .desktop-home-page .post-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
}

@media (max-width: 760px) {
    .desktop-home-page .post-list-thumbnail-placeholder span { display: none; }
    .desktop-home-page .post-item { color: inherit; }
}

/* Desktop hero alignment: keep the category rail flush-left, reveal the swordsman,
   and use the compact stacked account card shown in the approved reference. */
@media (min-width: 1100px) {
    .desktop-home-page .desktop-hero {
        background-size: 112% auto;
        background-position: calc(50% - 105px) 49%;
    }

    .desktop-home-page .home-category-nav {
        left: 0;
        width: calc(100% - 610px);
        border-radius: 0 8px 8px 0;
    }

    .desktop-home-page .desktop-home-aside {
        top: -228px;
        right: calc(122px - ((100vw - 100% - 15px) / 2));
        width: 450px;
    }

    .desktop-home-page .desktop-account-card {
        min-height: 180px;
        display: block;
        padding: 18px 20px 20px;
    }

    .desktop-home-page .desktop-account-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
    }

    .desktop-home-page .desktop-account-head strong {
        font-size: 20px;
    }

    .desktop-home-page .desktop-account-card > p {
        margin: 3px 0 14px;
    }

    .desktop-home-page .desktop-account-actions {
        width: 100%;
        height: 86px;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 7px;
        padding: 0;
        border-left: 0;
    }

    .desktop-home-page .desktop-account-actions .desktop-account-action {
        min-height: 86px;
        padding: 0 4px;
        font-size: 12px;
    }
}

@media (min-width: 1100px) and (max-width: 1439px) {
    .desktop-home-page .desktop-hero {
        background-size: 114% auto;
        background-position: calc(50% - 78px) 49%;
    }

    .desktop-home-page .home-category-nav {
        width: calc(100% - 530px);
    }

    .desktop-home-page .desktop-home-aside {
        width: 440px;
    }
}