.genre-card .genre-name,.genre-count {
    font-weight: 500
}

.genre-header {
    background: linear-gradient(to bottom,rgba(17,24,39,.95),#111827);
    border-bottom: 1px solid rgba(255,255,255,.1)
}

.genre-nav a {
    transition: .3s
}

.genre-nav a:hover {
    transform: translateY(-1px)
}

.drama-card {
    height: 100%
}

.drama-card .relative {
    background-color: #1a1a1a
}

.drama-card img {
    transition: transform .3s
}

.drama-card:hover img {
    transform: scale(1.05)
}

.drama-card .overlay {
    background: linear-gradient(to top,rgba(0,0,0,.9) 0,rgba(0,0,0,.7) 30%,rgba(0,0,0,0) 100%)
}

.filter-btn,.pagination a {
    transition: .2s
}

.filter-btn.active,.filter-btn:hover,.pagination .active,.pagination a:hover {
    background-color: var(--accent-color);
    color: #fff
}

[data-theme=dark] .filter-btn,[data-theme=dark] select {
    background-color: var(--bg-secondary);
    color: var(--text-primary)
}

select {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right .5rem center;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem
}

[data-theme=dark] .drama-card {
    background-color: var(--bg-secondary)
}

[data-theme=dark] select {
    border-color: var(--border-color)
}

[data-theme=dark] select:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px rgba(83,22,255,.2)
}

.drama-card .info-overlay {
    transition: .3s;
    background: linear-gradient(to top,rgba(0,0,0,.9) 0,rgba(0,0,0,.7) 50%,rgba(0,0,0,0) 100%)
}

.fade-in {
    animation: .3s ease-in fadeIn
}

.slide-up {
    animation: .3s ease-out slideUp
}

@keyframes fadeIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(10px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.genre-page-header {
    background: #f01c3d;
    padding: 1rem 0;
    text-align: center;
    border-bottom: 0 solid rgba(255,255,255,.1)
}

.genre-page-header h1 {
    color: #fff;
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: .25rem
}

.genre-page-header p {
    color: #fff;
    font-size: .9rem;
    font-weight: 600
}

.genre-list {
    padding: 3rem 0;
    display: grid;
    gap: .5rem
}

.genre-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-radius: 12px;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
    border: 1px solid rgba(0,0,0,.05);
    position: relative;
    overflow: hidden
}

.genre-item:hover {
    background-color: #f8f9fa;
    color: #f01c3d
}

.genre-arrow {
    width: 24px;
    height: 24px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none
}

[data-theme=dark] .genre-item {
    color: #fff;
    border-bottom-color: #2f2f2f;
    background: #333
}

[data-theme=dark] .genre-item:hover {
    color: #f01c3d;
    background-color: #444
}

.genre-card:hover,.popular-genre-card,[data-theme=dark] .genre-card:hover {
    background: var(--accent-color)
}

@media (max-width: 768px) {
    .genre-header {
        padding:4rem 1rem
    }

    .filter-container {
        flex-direction: column;
        gap: 1rem
    }

    .filter-container>div,select {
        width: 100%
    }

    .genre-list {
        margin: 1rem auto
    }

    .genre-item {
        padding: .75rem 1rem
    }
}

.genre-grid {
    padding: 2rem 0
}

.popular-genre-card {
    border-radius: .5rem;
    padding: 1.5rem;
    color: #fff;
    text-align: center;
    transition: transform .2s
}

.popular-genre-card:hover {
    transform: translateY(-2px)
}

.genre-card {
    background: #f3f4f6;
    border-radius: .5rem;
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: .2s
}

.genre-card:hover {
    color: #fff
}

[data-theme=dark] .genre-card {
    background: #1f2937;
    color: #fff
}

[data-theme=dark] .genre-page-header p {
    color: #fff;
    font-size: .9rem
}

[data-theme=dark] .genre-page-header h1 {
    color: #fff;
    font-size: 1.5rem;
    margin-bottom: .25rem
}

[data-theme=dark] .genre-page-header {
    background: #f01c3d;
    padding: 1rem 0;
    text-align: center;
    border-bottom: 1px solid rgba(255,255,255,.1)
}

.genre-count {
    font-size: .9rem;
    color: #f01c3d;
    margin-right: 1rem;
    background: rgb(89 141 195 / 23%);
    padding: .25rem .75rem;
    border-radius: 20px;
    border: 1px solid rgb(26 130 232);
}

.genre-arrow,.genre-count,.genre-item,.genre-name {
    transition: .3s cubic-bezier(.4, 0, .2, 1)
}

.genre-name {
    font-size: 1.1rem;
    font-weight: 600;
    flex: 1
}