background: linear-gradient(180deg,#0d0d0d,#1a1a1a); .search-bar{display:flex;justify-content:center;align-items:center;max-width:1000px;margin:20px auto}.search-bar input{flex:1;min-width:200px;padding:10px 14px;font-size:16px;border:1px solid #ccc;border-radius:6px;outline:none;transition:border .2s ease-in-out,box-shadow .2s ease-in-out}.search-bar input:focus{border-color:#1890ff;box-shadow:0 0 6px #1890ff4d}.search-bar button{padding:10px 18px;font-size:16px;font-weight:500;border:none;border-radius:6px;background:#1890ff;color:#fff;cursor:pointer;transition:background .2s ease-in-out,transform .1s ease-in-out}.search-bar button:hover{background:#1676d2}.search-bar button:active{transform:scale(.97)}.movie-grid{display:grid;gap:20px;margin:20px auto;max-width:1000px}@media (max-width: 500px){.movie-grid{grid-template-columns:repeat(1,1fr)}}@media (min-width: 501px) and (max-width: 768px){.movie-grid{grid-template-columns:repeat(2,1fr)}}@media (min-width: 769px) and (max-width: 1024px){.movie-grid{grid-template-columns:repeat(3,1fr)}}@media (min-width: 1025px){.movie-grid{grid-template-columns:repeat(4,1fr)}}.movie-card{position:relative;border:1px solid #ccc;border-radius:8px;width:100%;max-width:220px;background:#fff;overflow:hidden;margin:0 auto}.poster-wrapper{position:relative;width:100%;aspect-ratio:2 / 3;border-radius:4px;overflow:hidden}.movie-poster{width:100%;height:100%;object-fit:cover;display:block;border-radius:4px;transition:transform .3s ease-in-out}.heart-btn{position:absolute;top:8px;right:8px;font-size:28px;border:none;background:none;cursor:pointer;color:#fffc;text-shadow:0px 1px 3px rgba(0,0,0,.6);transition:color .3s ease,transform .2s ease}.heart-btn:hover{transform:scale(1.2);color:#e96214}.heart-btn.active{color:red}.overlay{position:absolute;bottom:0;left:0;right:0;background:#0009;color:#fff;text-align:center;padding:10px;opacity:0;transform:translateY(100%);transition:all .3s ease-in-out}.poster-wrapper:hover .overlay{opacity:1;transform:translateY(0)}.poster-wrapper:hover .movie-poster{transform:scale(1.05)}.movie-title{margin:0;font-size:1.1rem}.movie-year{margin:0;font-size:.9rem;color:#f1f1f1}@media (max-width: 480px){.movie-card{max-width:90%}.heart-btn{font-size:34px}}.navbar{display:flex;justify-content:space-between;align-items:center;padding:12px 20px;color:#fff;max-width:1000px;margin:0 auto;border-radius:8px}.nav-logo{font-size:1.2rem;font-weight:700}.nav-links{display:flex;gap:20px}.nav-link{padding:6px 14px;border:1px solid #1890ff;border-radius:6px;color:#1890ff;text-decoration:none;transition:all .2s ease-in-out}.nav-link:hover{background:#1890ff;color:#fff}body{margin:0;min-height:100vh;background:linear-gradient(180deg,#0d0d0d,#1a1a1a);color:#f5f5f5}