body{margin:0;background:#111;color:#eee;font-family:Arial}header{display:flex;justify-content:space-between;padding:16px;background:#1b1b1b;border-bottom:3px solid #ff5500}input{padding:8px;border-radius:20px;border:none}.wrap{display:grid;grid-template-columns:340px 1fr;gap:20px;padding:20px}img{width:300px;height:300px;object-fit:cover;border-radius:12px;background:#333}ul{list-style:none;padding:0}li{padding:12px;margin:6px 0;background:#222;border-radius:8px;cursor:pointer}li:hover,.active{background:#ff5500}@media(max-width:800px){.wrap{grid-template-columns:1fr}}