@media(max-width:1200px) {
    .desktop-nav {
        gap: 20px
    }

    .search-box {
        width: 220px
    }

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

    .manhwa-cover {
        height: 230px
    }
}

@media(max-width:800px) {
    body {
        padding-bottom: 70px
    }

    .site-header {
        height: 72px
    }

    .header-inner {
        padding: 0 18px;
        justify-content: space-between
    }

    .desktop-nav, .header-actions {
        display: none
    }

    .mobile-icon {
        display: block;
        border: 0;
        background: transparent;
        color: #eee;
        font-size: 21px
    }

    .brand {
        min-width: auto;
        order: 2
    }

    .menu-toggle {
        order: 1
    }

    .mobile-search {
        order: 3
    }

    .brand-logo {
        width: 39px;
        height: 39px
    }

    .brand-text strong {
        font-size: 17px
    }

    .mobile-drawer {
        display: flex;
        position: fixed;
        top: 0;
        right: -300px;
        width: 290px;
        height: 100vh;
        background: #0b0f14;
        z-index: 200;
        padding: 22px;
        flex-direction: column;
        gap: 5px;
        border-left: 1px solid var(--border);
        transition: .25s
    }

        .mobile-drawer.open {
            right: 0
        }

    .drawer-header {
        display: flex;
        justify-content: space-between;
        margin-bottom: 18px
    }

    .drawer-close {
        background: transparent;
        border: 0;
        color: #fff;
        font-size: 22px
    }

    .mobile-drawer > a {
        padding: 13px;
        color: #ddd
    }

    .drawer-auth {
        display: flex;
        gap: 8px;
        margin-top: 12px
    }

        .drawer-auth button {
            flex: 1;
            height: 40px;
            border: 1px solid #2b3139;
            border-radius: 8px;
            background: #171c23;
            color: #fff
        }

            .drawer-auth button:last-child {
                background: var(--purple)
            }

    .home-layout {
        display: block;
        padding: 12px 14px 20px
    }

    .sidebar-column {
        display: none
    }

    .hero {
        height: 450px
    }

    .hero-content {
        right: 30px;
        left: 30px;
        width: auto;
        top: 38px
    }

    .hero h1 {
        font-size: 29px
    }

    .hero p {
        font-size: 11px
    }

    .hero-arrow {
        display: none
    }

    .hero-shade {
        background: linear-gradient(180deg,#070b10,#070b1050 38%,#070b10e8)
    }

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

    .manhwa-cover {
        height: 190px
    }

    .mobile-bottom-nav {
        position: fixed;
        display: flex;
        bottom: 0;
        left: 0;
        right: 0;
        height: 68px;
        background: #0b0f14ee;
        border-top: 1px solid #292f37;
        z-index: 150;
        justify-content: space-around;
        align-items: center
    }

        .mobile-bottom-nav a {
            color: #d8dbe0;
            font-size: 9px;
            text-align: center
        }

            .mobile-bottom-nav a.active {
                color: var(--purple-light)
            }

        .mobile-bottom-nav i {
            display: block;
            font-size: 19px;
            margin-bottom: 4px
        }
}

@media(max-width:520px) {
    .hero {
        height: 440px
    }

        .hero h1 {
            font-size: 27px
        }

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

    .manhwa-cover {
        height: 240px
    }

    .chapter-row {
        padding: 10px 12px;
        gap: 10px
    }

        .chapter-row > img {
            width: 100px;
            height: 67px
        }
}

@media(max-width:520px) {
    .visit-card {
        padding: 10px;
        gap: 10px
    }

        .visit-card > img {
            width: 82px;
            height: 82px
        }

    .visit-title-row h3 {
        font-size: 12px
    }

    .visit-chapter {
        display: none
    }

    .visit-progress {
        margin: 10px 0 7px
    }

    .visit-bottom {
        font-size: 8px
    }

        .visit-bottom button {
            font-size: 9px
        }

    .last-read-content > img {
        width: 62px;
        height: 84px
    }
}