body {
    background-color: #1a1a1a;
    color: #e0e0e0;
    font-family: 'Ubuntu', sans-serif;
}
.navbar {
    border-bottom: 1px solid #333;
}
.navbar-brand img {
    filter: invert(1);
}
.drama-card {
    background-color: #222;
    border-radius: 4px;
    overflow: hidden;
    text-decoration: none;
    color: #e0e0e0;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.drama-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
    color: #fff;
}
.drama-card-poster {
    position: relative;
    padding-top: 140%;
}
.drama-card-poster img {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;
}
.drama-card-status {
    position: absolute;
    top: 8px; left: 8px;
    background-color: rgba(0,0,0,0.7);
    color: #fff;
    padding: 2px 8px;
    font-size: 0.75rem;
    border-radius: 4px;
}
.drama-card-body { padding: 0.8rem; }
.drama-card-title {
    font-size: 0.9rem; font-weight: 500; margin: 0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.drama-card-year {
    font-size: 0.8rem;
    color: #888;
}
.skeleton { background-color: #2a2a2a; border-radius: 4px; animation: pulse 1.5s infinite ease-in-out; }
.skeleton-poster { padding-top: 140%; }
.skeleton-title { height: 20px; margin-bottom: 5px; }
.skeleton-text { height: 14px; width: 50%; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
.sidebar-box { background-color: #222; border-radius: 4px; padding: 1rem; }
.sidebar-title { font-size: 1.1rem; color: #fff; margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid #333; }
.sidebar-category-list { list-style: none; padding: 0; margin: 0; }
.sidebar-category-list li a { display: block; padding: 6px 0; text-decoration: none; color: #bbb; transition: color 0.2s ease; font-size: 0.9rem; }
.sidebar-category-list li a:hover { color: #fff; }
#detail-genres .badge, #detail-tags .badge { transition: background-color 0.2s ease; }
#detail-genres .badge:hover, #detail-tags .badge:hover { background-color: #0d6efd !important; }
.swiper-button-next, .swiper-button-prev { color: #fff; }
.az-letter-section { margin-bottom: 2rem; }
.az-letter-title { background-color: #222; padding: 5px 10px; border-radius: 4px; display: inline-block; }
.az-list { list-style: none; padding: 0; column-count: 2; column-gap: 2rem; }
@media (min-width: 768px) { .az-list { column-count: 4; } }
.az-list li a { text-decoration: none; color: #bbb; }
.az-list li a:hover { color: #fff; }