* { margin:0; padding:0; box-sizing:border-box; font-family:'Segoe UI',Tahoma,Verdana,sans-serif; }
body { background:#fff; color:#111; line-height:1.5; display:flex; flex-direction:column; min-height:100vh; }
header { text-align:center; padding:2rem 1rem; font-size:2rem; font-weight:bold; border-bottom:1px solid #ccc; letter-spacing:2px; }
main { flex:1; max-width:1200px; margin:2rem auto; padding:0 1rem; }
.search-bar { margin-bottom:1rem; text-align:center; }
.search-bar input { width:80%; max-width:400px; padding:0.5rem 1rem; border-radius:8px; border:1px solid #ccc; font-size:1rem; }
.genre-filters { text-align:center; margin-bottom:2rem; }
.genre-filters button { margin:0.3rem; padding:0.4rem 0.8rem; border:none; border-radius:6px; background:#111; color:#fff; cursor:pointer; transition: background 0.3s; }
.genre-filters button:hover { background:#333; }
.genre-filters button.active { background:#555; }
.movie-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:1.5rem; }
.movie-card { background:#f9f9f9; border-radius:12px; overflow:hidden; box-shadow:0 4px 12px rgba(0,0,0,0.1); cursor:pointer; transition:transform 0.3s; }
.movie-card:hover { transform:translateY(-5px); }
.movie-card img { width:100%; display:block; }
.movie-info { padding:1rem; }
.movie-title { font-weight:bold; margin-bottom:0.3rem; font-size:1.1rem; }
.movie-genre { font-size:0.85rem; color:#666; margin-bottom:0.5rem; }
.movie-summary { font-size:0.9rem; color:#333; max-height:60px; overflow:hidden; }
footer { background:#111; color:#fff; text-align:center; padding:2rem 1rem; font-size:0.95rem; margin-top:2rem; }
.modal { display:none; position:fixed; z-index:1000; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.7); justify-content:center; align-items:center; }
.modal-content { background:#fff; max-width:700px; width:90%; border-radius:12px; padding:1.5rem; position:relative; max-height:90vh; overflow-y:auto; }
.modal-close { position:absolute; top:10px; right:15px; font-size:1.5rem; font-weight:bold; cursor:pointer; }
.modal-content img { width:100%; border-radius:8px; margin-bottom:1rem; }
.modal-content h2 { margin-bottom:0.5rem; }
.modal-content p { margin-bottom:0.8rem; }
@media(max-width:600px){ header{font-size:1.5rem;} .search-bar input{width:95%;} }