*{box-sizing:border-box}
body{font-family:system-ui,sans-serif;background:#f4f6f8;margin:0;padding:0}
header{margin-bottom:20px}
h1{text-align:center;color:#1e293b;font-size:26px;margin:20px 0}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:14px;margin:0 auto;max-width:1800px;padding:0 15px 40px;justify-items:center}
.card{background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 2px 6px #0000001a;transition:transform 0.2s,box-shadow .2s;position:relative;width:100%;max-width:160px}
.card span.year-label{position:absolute;bottom:26px;right:6px;background:#000000b3;color:#fff;font-size:11px;padding:2px 6px;border-radius:4px}
.card:hover{transform:scale(1.05);box-shadow:0 4px 12px #00000026}
.card img{width:100%;height:220px;object-fit:cover;border-bottom:1px solid #e5e7eb}
.card .info{padding:8px;text-align:center}
.card .title{font-size:14px;font-weight:600;color:#111;line-height:1.3}
.card .category{font-size:12px;color:#555;margin-top:3px}
.badge{position:absolute;top:8px;left:8px;background:#2563eb;color:#fff;font-size:12px;font-weight:700;padding:3px 8px;border-radius:6px;text-shadow:0 1px 2px #0003}
@media (max-width: 1024px) {
.grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px}
}
@media (max-width: 600px) {
.grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}
.card{max-width:140px}
.card img{height:190px}
}
.container{max-width:1200px;margin:20px auto;padding:0 15px}
.player-container{width:100%;background:#000;border-radius:10px;overflow:visible}
.player-container iframe,.player-container video{width:100%;height:75vh;display:block;border:none}
.info-container{background:#fff;margin-top:20px;border-radius:10px;padding:20px;box-shadow:0 2px 6px #0000001a}
.info-container h2{margin-top:0;color:#111}
.info-container h3{margin-top:15px;color:#1e293b}
.episode-btn,.download-btn{display:inline-block;background:#2563eb;color:#fff;padding:8px 15px;border-radius:6px;text-decoration:none;font-weight:500;margin-top:5px}
.episode-btn:hover,.download-btn:hover{background:#1d4ed8}
.desc{margin-top:10px;line-height:1.6;color:#333}
@media (max-width: 768px) {
.player-container iframe,.player-container video{height:55vh}
}
.tab-episode button,.tab-server button{padding:8px 12px;margin:5px 6px 5px 0;border-radius:6px;border:0;background:#f3f4f6;cursor:pointer;font-size:14px;transition:.2s}
.tab-episode button:hover,.tab-server button:hover{background:#dbeafe}
.tab-episode button.active,.tab-server button.active{background:#0b5cff;color:#fff}
.accordion{margin-top:15px}
.accordion-btn{width:100%;text-align:left;background:#fff;border:1px solid #ddd;border-radius:8px;padding:12px 16px;font-size:15px;font-weight:600;color:#111;cursor:pointer;display:flex;justify-content:space-between;align-items:center;transition:background .2s}
.accordion-btn:hover{background:#f3f4f6}
.accordion-content{display:none;background:#fff;border:1px solid #ddd;border-top:none;border-radius:0 0 8px 8px;padding:14px;color:#374151;font-size:14px;line-height:1.6}
.accordion.open .accordion-content{display:block}
.arrow{transition:transform .2s}
.accordion.open .arrow{transform:rotate(180deg)}
.pagination a{display:inline-block;background:#0078ff;color:#fff;padding:6px 12px;border-radius:6px;text-decoration:none}
.pagination a:hover{background:#005fcc}